title: Angular JS - How can i animate on model change?
body: <p>i'm trying to do a nice fadeout+fadein transition when the currentVertical changes.
  in knockout it was so simple but i can't figure it out here. please help. </p>
  
  <p>the following code displays a UL list which is "bound" to a pricings array in the $scope.currentVertical when an LI element is clicked, the $scope.currentVertical is changed and the UL list updates accordingly. This works fine, but i would like the entire #container div to fade out and fadein when $scope.currentVertical is changed. Please help...</p>
  
  <p>My html:</p>
  
  <p>
      
          
          <br>
          
          
      </p>
  
  <pre><code>&lt;body&gt;
      &lt;h1&gt;Pricing Poll&lt;/h1&gt;
      &lt;div ng-controller="VerticalsController"&gt;
          &lt;div id="container"&gt;
              &lt;h2&gt;{{currentVertical.title}}&lt;/h2&gt;
  
              &lt;ul&gt;
                  &lt;li ng-repeat="pricing in currentVertical.pricings"&gt;
                      &lt;a ng-click="currentVertical.selectPricing(pricing)"&gt;{{pricing.name}}&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>my javascript:</p>
  
  <pre><code>function VerticalsController($scope) {
  
    $scope.verticals = [
      {
          title:'internet',
          pricings: [
              {
                  name: 'netvision',
                  monthly: 23
              },
              {
                  name: 'hot',
                  monthly: 33
              },
              {
                  name: '012',
                  monthly: 28
              }
          ]
      },
      {
          title:'cellular', 
          pricings: [
              {
                  name: 'cellcom',
                  monthly: 20
              },
              {
                  name: 'pelephone',
                  monthly: 30
              },
              {
                  name: 'orange',
                  monthly: 25
              }
          ]
      },
      {
          title:'banks', 
          pricings: [
              {
                  name: 'leumi',
                  monthly: 20
              },
              {
                  name: 'poalim',
                  monthly: 30
              },
              {
                  name: 'benleumi',
                  monthly: 25
              }
          ]
      }];
  
      $scope.selected = [
      ];
  
      $scope.currentIndex = 0;
      $scope.currentVertical = $scope.verticals[0];
  
    $scope.selectPricing = function(pricing) {
      $scope.selected.push(pricing);
      $scope.currentIndex++;
      $scope.currentVertical = $scope.verticals[$scope.currentIndex];
    };
  
    /*$scope.remaining = function() {
      var count = 0;
      angular.forEach($scope.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };*/
  }
  </code></pre>