title: AngularJs Counter to count up to a specific target number
body: <p>I am trying to create a counter using Angularjs which should count up to a number which is already present in that division. Here is my html snippet.</p>
  
  <pre><code>    &lt;div  class="circle-home"&gt;
        &lt;span class="circle-home-score " id="counterofreviews" data-count="{{noReviews}}"&gt;{{noReviews}}&lt;/span&gt; REVIEWS
      &lt;/div&gt;
  </code></pre>
  
  <p>Now when I am trying to get the value inside the span I get it as {{noReviews}} instead of its value.</p>
  
  <p>Here is my AngularJs code.</p>
  
  <pre><code>    var demoApp = angular.module(['demoApp','ngRoute','ui.bootstrap']);
  
      demoApp.controller('SearchController',function ($scope, $http, $facebook, $interval){
  
      $scope.noReviews=100;
      $scope.childOnLoad = function() {
  
      $scope.uppercount=$("#counterofreviews").text();
      $scope.no_Reviews=0;
      console.log($scope.uppercount);
  
      var stop;
      stop = $interval(function() {
      if ($scope.uppercount &gt;$scope.no_Reviews) {
  
           $scope.noReviews=$scope.no_Reviews;
           $scope.no_Reviews++;
           console.log('Inside if statement');
       } else {
         $scope.stopFight();
       }
      }, 100);
  
     };
  
     $scope.stopFight = function() {
     if (angular.isDefined(stop)) {
     $interval.cancel(stop);
     stop = undefined;
      }
     };
  
  
     $scope.childOnLoad();
  
     };
  </code></pre>
  
  <p>Output of console.log($scope.uppercount) is {{noReviews}}. I am unable to figure out a proper way to do it. Please suggest the correction or any other better method for the same perpose. </p>