title: Angular - ng-class - progressbar wizard
body: <p>So i am working on a multistep wizard in AngularJS. It looks something like this.<a href="https://i.stack.imgur.com/kAcm4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kAcm4.png" alt="Multistep wizard"></a></p>
  
  <p>I am using angular ui-router, i have 3 states so when i am on state 1 i want step 1 to be active and if state2 then step1 and step2 should both be active.</p>
  
  <p>I have tried to give each state a class of active if the state.current.name matches the state name.</p>
  
  <p>Here is my code:</p>
  
  <p>Html progress wizard state1</p>
  
  <pre><code>&lt;ul class="progress--bar"&gt;
      &lt;li ng-class="{'active' : state.current.name === 'phones'}"&gt;Step1&lt;/li&gt;
      &lt;li&gt;Step2&lt;/li&gt;
      &lt;li&gt;Step3&lt;/li&gt;
      &lt;li&gt;Step4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Html progress wizard state2</p>
  
  <pre><code>&lt;ul class="progress--bar"&gt;
      &lt;li ng-class="{'active' : state.current.name === 'phones' || state.current.name === 'devices'}"&gt;Step1&lt;/li&gt;
      &lt;li ng-class="{'active' : state.current.name === 'devices'}"&gt;Step2&lt;/li&gt;
      &lt;li&gt;Step3&lt;/li&gt;
      &lt;li&gt;Step4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This works but there must be a better way of doing this?</p>
  
  <p>Stateprovider</p>
  
  <pre><code>app.config(['$urlRouterProvider', '$stateProvider','$httpProvider', 
      function($urlRouterProvider, $stateProvider, $httpProvider) {
  
      $urlRouterProvider.otherwise('/phones');
  
      $stateProvider
          .state('phones', {
              url: '/phones',
              cache: false,
              templateUrl: '/frontstart/studentfix/angular/templates/phones-tpl.html',
              controller: 'phonesCtrl'
          })
              .state('devices', {
                  url: '/phones/devices/:phonesId',
                  cache: false,
                  templateUrl: '/frontstart/studentfix/angular/templates/device-tpl.html',
                  controller: 'deviceCtrl'
              })
                  .state('details', {
                      url: '/phones/devices/details/:id',
                      cache: false,
                      templateUrl: '/frontstart/studentfix/angular/templates/device-detail-tpl.html',
                      controller: 'deviceDetailCtrl'
                  });
  
  }]);
  </code></pre>
  
  <p>Controllers</p>
  
  <pre><code>app.controller('phonesCtrl', ['$scope','$rootScope', '$state','$stateParams','PhonesResource', 
      function($scope, $rootScope, $state, $stateParams, PhonesResource){
  
      $rootScope.state  = $state;
  
      $scope.phoneCompanies         =   PhonesResource.all();
  
      $scope.selectDevice   =   function (id) {
          $state.go('devices', { phonesId: id });
      };
  
  }]);
  
  app.controller('deviceCtrl', ['$scope','$state','$stateParams','PhonesResource', '$rootScope', 
      function($scope, $state, $stateParams, PhonesResource, $rootScope){
  
      $scope.phoneCompanies = PhonesResource.all();
  
      $scope.phoneCompanies = PhonesResource.get($stateParams.phonesId);
  
      $scope.showDetails = function (selectedPhone) {
          $rootScope.selectedPhone = selectedPhone;
          $state.go('details',{id: selectedPhone.id});
      };
  }]);
  
  app.controller('deviceDetailCtrl', ['$scope','$state','$stateParams','PhonesResource', '$rootScope',
      function($scope, $state, $stateParams, PhonesResource, $rootScope){
          // console.info('$rootScope.selectedPhone',$rootScope.selectedPhone);
          if(!$rootScope.selectedPhone){
              $rootScope.selectedPhone = PhonesResource.getPhone($stateParams.id);
          }
          // console.info('$rootScope.selectedPhone',$rootScope.selectedPhone);
          $scope.selectedPhone = $rootScope.selectedPhone;
  
  }]);
  </code></pre>
  
  <p>Any help would be appriciated.</p>
  
  <p>Thanks!</p>