Button Bar with actionable ui router states

button.svc.js

(function(){
  'use strict'
  angular.module('Whapi')
    .service('buttonSvc',function($rootScope, toastr){
      this.buttons = []
      this.addButton = function(id, title, classes, href, action, sortOrder){
        console.log(this.buttons)
        var button = {};
        var pushViable = true;
        button.id = id
        button.title = title
        button.classes = classes
        button.href = href
        button.action = action
        button.sortOrder = sortOrder
        angular.forEach(this.buttons, function(index, sort){
          if(button.sortOrder === sort && button.id !== index.id){
            toastr.error('Button Sort Order Exists')
            pushViable = false
          }else if(button.sortOrder === sort){
            pushViable = false
          }
        })
        if(pushViable === true){
          this.buttons.push(button)
          this.buttons = sortButtons(this.buttons)
          $rootScope.$broadcast('buttonBar:update')
        }
      }
      this.clearAll = function(){
        this.buttons = []
      }

      function sortButtons(buttons){
        return _.sortBy(buttons,'sortOrder')
      }

    })
})()

buttonbar.controller.js

(function(){
  'use strict'
  angular.module('Whapi').controller('buttonBar', function($scope, $modal, $state, $rootScope, buttonSvc){
    $scope.buttons = buttonSvc.buttons
    $rootScope.$on('buttonBar:update', function(){
      $scope.buttons = buttonSvc.buttons
    })


  })
})()

buttonbar.html

<div class="container">
  <ul class="button-group" ng-controller="buttonBar">
    <li ng-repeat="button in buttons track by button.sortOrder"><a href="{{button.href}}" class="{{button.classes}}" ng-click="{{button.action}}">{{button.title}}</a></li>
  </ul>
</div>

core.config.js

(function(){
  'use strict'

  angular.module('Whapi.core')
    .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider, jwtInterceptorProvider, toastrConfig) {
      $locationProvider.html5Mode(true)
      $stateProvider
        .state('main', {
          url:'/',
          templateUrl: 'app/main/main.html',
          controller: 'MainCtrl'
        })
        .state('employees', {
          url:'/employees',
          templateUrl: 'app/employees/employees.html',
          controller: 'EmployeeCtrl',
          onEnter: function(authService){
            authService.checkAuth()
          }
        })
        .state('customers', {
          url:'/customers',
          templateUrl: 'app/customers/customers.html',
          controller: 'customerCtrl',
          onEnter: function(authService){
            authService.checkAuth()
          },
          onExit: function(buttonSvc){
            buttonSvc.clearAll()
          }
        })
          .state('customers.list',{
            url: '/',
            parent: 'customers',
            templateUrl: 'app/customers/customerList.html',
            controller: 'customerCtrl'
          })
          .state('customers.detail', {
            url: '/:id',
            parent: 'customers',
            templateUrl: 'app/customers/detail/detail.html',
            controller: 'customerDetail'
          })
        .state('profile', {
          url:'/profile',
          templateUrl: 'app/employees/profile.html',
          controller: 'employeeProfileCtrl'
        }).
        state('orders', {
          url: '/orders',
          templateUrl: 'app/orders/order.html',
          controller: 'orderCtrl',
          onEnter: function(authService){
            authService.checkAuth()
          },
          onExit: function(buttonSvc){
            buttonSvc.clearAll()
          }
        })

        $urlRouterProvider.otherwise('/')

        $httpProvider.defaults.headers.delete =  { 'Content-Type': 'application/json;charset=utf-8' }
        jwtInterceptorProvider.tokenGetter = function(){
          return localStorage.getItem('JWT');
      }
      $httpProvider.interceptors.push('jwtInterceptor');
      angular.extend(toastrConfig, {
        positionClass: 'toast-bottom-right'
      })
    })
    .run(function(editableOptions, editableThemes){
      editableOptions.theme = 'default'

      editableThemes['default'].submitTpl =  '<button class="button small">save</button>'
      editableThemes['default'].cancelTpl =  '<button class="button small" ng-click="$form.$cancel()">cancel</button>'
    })
    .constant('ENDPOINT_URI','http://localhost:4000')

})()

customerDetail.js

(function(){
  'use strict';

  angular.module('Whapi.customers')
    .controller('customerDetail', function($scope,$modal,employeeService,
      customer, authService, toastr, $stateParams, $state, customerSchema, buttonSvc){
      buttonSvc.addButton('goBack','Go Back', 'button small', '#','toTheGrid',2)

      $scope.customer = null
      $scope.customerCommits = null
      $scope.modifiedData = false
      $scope.states = customer.states
      $scope.statusList = customer.statusList
      $scope.categoryList = customer.categoryList

      $scope.findBiller = false
      $scope.selfBilled = false
      $scope.defaultBiller = {}

      $scope.getCustomer = function(id){
        customer.getCustomer(id).then(function(response){
          $scope.selfBilled = false
          $scope.defaultBiller = {}
          $scope.customer = response

          if($scope.customer.default_billing === $scope.customer.customer_id){
            $scope.selfBilled = true
          }
          $scope.customerCommits = customerSchema
          if(($scope.customer.latitude) && ($scope.customer.longitude)){
            $scope.map = { center: {
              latitude: $scope.customer.latitude,
              longitude: $scope.customer.longitude }, zoom: 15 };
          }
          angular.merge($scope.customerCommits, {customer_id: parseInt(id)})
          if(response.default_billing && (response.default_billing === id)){
            $scope.defaultBiller = response
          }else if(response.default_billing !== response.customer_id){
            customer.getCustomer(response.default_billing).then(function(response){
              $scope.defaultBiller = response
            })
          }
          $scope.modifiedData = false
          }).catch(function(error){
            toastr.error(error, 'Error:')
          })
      }
      $scope.getCustomer($stateParams.id)


      $scope.modifyCustomer = function(key, value){
        if (key === 'numUnits') {value = parseInt(value)}
        angular.merge($scope.customerCommits[key] = value)
        if($scope.modifiedData === false) {$scope.modifiedData = true}
      }
      $scope.onSelect = function($item, $model){
        $scope.modifyCustomer('default_billing',$model)
        $scope.defaultBiller = $item
      }

      $scope.commitCustomer = function(commit){
          customer.modCustomer(commit).then(function(response){
            toastr.success(response,'Success')
            $scope.getCustomer($stateParams.id)
          })
      }
      $scope.billMe = function(){
        $scope.customerCommits['default_billing'] = $scope.customerCommits['customer_id']
        $scope.commitCustomer($scope.customerCommits)
      }
      $scope.toTheGrid = function(){
        $state.go('customers.list')
      }

    })
})()

customerList.js

(function(){
  'use strict'

  angular.module('Whapi.customers',[])
    .controller('customerCtrl', function($scope, $modal, employeeService,
      customer, authService, toastr, $state, $rootScope, buttonSvc){
      buttonSvc.addButton('newCustomer','New Customer', 'button small', '#','newCustomer()',0)
      authService.checkAuth()
      $scope.gridOptions = {}
      $scope.customerList = null
      $scope.refresh = function(){
        customer.getCustomers().then(function(response){
          $scope.customerList = response
          $scope.gridOptions.data = response
        }).catch(function(error){
          toastr.error(error,'Error:')
        })
      }
      $scope.refresh()
      $scope.$on('customer:update', function(){
        $scope.refresh()
      })

      $scope.newCustomer = function(){
        var customerModal = $modal.open({
          templateUrl: 'app/customers/newCustomer.html',
          controller: 'customerModalCtrl',
          windowClass: 'small'
        })

        customerModal.result.then(function(){
          $rootScope.$broadcast('customer:update')
        })
      }
      function rowTemplate(){
        return '<div ng-dblclick="grid.appScope.rowDblClick(row)" '+
        'ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" '+
        'class=\"ui-grid-cell\" ng-class=\"{ \'ui-grid-row-header-cell\': col.isRowHeader }\" ui-grid-cell></div>'
      }

      $scope.rowDblClick = function(row){
          $state.go('customers.detail', {id: row.entity.customer_id})
      }

      $scope.gridOptions = {
        onRegisterApi : function(gridApi){
          $scope.gridApi = gridApi
        },
        data: $scope.customerList,
        enableRowHeaderSelection: false,
        enableRowSelection: true,
        enableSelectAll: false,
        multiSelect: false,
        noUnselect: true,
        rowTemplate: rowTemplate(),
        columnDefs : [
        {name: 'name', type: 'string'},
        {name: 'line1', type: 'string'},
        {name: 'city', width: '16%', type: 'string'},
        {name: 'state_iso', displayName: 'State', width: '8%', type: 'string'},
        {name: 'zip', width: '11%', type: 'string'},
        {name: 'numUnits', displayName: 'Units', width: '8%', type: 'number'},
        {name: 'status_name', displayName: 'Status', width: '11%', type: 'string'}
      ]
    }
    })
})()