title: scope variable not updating with ng-change - angularjs
body: <p>Seems like a simple problem though but finding it hard to fix. 
  There is a pagination component, that has a button &amp; a dropdown. User can go to a page by either clicking the button or selecting that page number in dropdown.</p>
  
  <p>The problem is, when I select a value in the dropdown, nothing happens. Because the scope variable doesnt change from the previous one.</p>
  
  <p><strong>aspx:</strong></p>
  
  <pre><code>&lt;div data-ng-app="app" data-ng-controller="ReportsCtrl"&gt;
  &lt;div id="paging-top"&gt;                
   &lt;div&gt;
     &lt;ul&gt;         
       &lt;li&gt;
         &lt;select data-ng-model="SelectedPage" data-ng-change="ShowSelectedPage();" 
          data-ng-options="num for num in PageNumbers track by num"&gt;
         &lt;/select&gt;
       &lt;/li&gt;
       &lt;li data-ng-click="ShowNextPage();"&gt;&lt;a href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;         
     &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  <strong>app.js</strong></p>
  
  <pre><code>var app = angular.module("app", ["ngRoute"]);
  </code></pre>
  
  <p><strong>ReportsCtrl.js</strong></p>
  
  <pre><code>app.controller("ReportsCtrl", ["$scope","ReportsFactory",function ($scope,ReportsFactory) {
  
  init();
  var init = function () { 
    $scope.ShowReport(1);
  }
  
  $scope.ShowReport = function (pageNumber) {
    GetUserResponsesReport(pageNumber);
  } 
  
  function GetUserResponsesReport(pageNumber) {
  
      $scope.UserResponsesReport = [];        
      var promise = ReportsFactory.GetReport();
      promise.then(function (success) {
          if (success.data != null &amp;&amp; success.data != '') {                
              $scope.UserResponsesReport = success.data;                
              BindPageNumbers(50, pageNumber);
          }            
      });        
  }
  
  function BindPageNumbers(totalRows, selectedPage) {        
      $scope.PageNumbers = [];
      for (var i = 1; i &lt;= 5 ; i++) {
          $scope.PageNumbers.push(i);
      }
      $scope.SelectedPage = selectedPage;        
  }
  
  $scope.ShowSelectedPage = function () {
      alert($scope.SelectedPage);
      $scope.ShowReport($scope.SelectedPage);
  }
  
   $scope.ShowNextPage = function () {        
      $scope.SelectedPage = $scope.SelectedPage + 1;
      $scope.ShowReport($scope.SelectedPage);        
  }   
  }]);
  </code></pre>
  
  <p>Say, the selected value in dropdown is 1. When I select 2 in the dropdown, the alert shows1. When <code>Next</code> is clicked, the dropdown selection changes to 2 as expected. Now, when I select 1 in the dropdown, the alert shows 2.</p>
  
  <p>Tried to make a fiddle, but do not know how to do with a <code>promise</code> - <a href="http://jsfiddle.net/bpq5wxex/2/" rel="nofollow">http://jsfiddle.net/bpq5wxex/2/</a></p>