title: scope variable not changing - angularjs
body: <p>The scope variable <code>SelectedPage</code> is not updating.
  There is a <code>ul li</code> for pagination, that has a dropdown &amp; then a next button. User can go to a page either by clicking the button or choosing an option in select.
  When I click on Next or select 2 in the dropdown, I'm expecting the value of <code>$scope.SelectedPage</code> to change to 2. But it always remains 1.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;     
   &lt;li&gt;
     &lt;select ng-model="SelectedPage" ng-change="ShowPageResult()"&gt;
       &lt;option value="1"&gt;1&lt;/option&gt;
       &lt;option value="2"&gt;2&lt;/option&gt;
     &lt;/select&gt;
   &lt;/li&gt;
   &lt;li ng-click="SelectedPage = SelectedPage + 1;ShowPageResult();"&gt;&lt;a href=" #"&gt;Next&lt;/a&gt;&lt;/li&gt; 
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Ctrl.js</strong></p>
  
  <pre><code>$scope.ShowPageResult = function () {
         console.log($scope.SelectedPage); //always prints 1        
      } 
  </code></pre>
  
  <p><strong>EDIT</strong>
  <a href="http://jsfiddle.net/g8pLhf79/" rel="nofollow">http://jsfiddle.net/g8pLhf79/</a>
  After the page loads, click on 'Next', the no. increments.
  Now select a value in the dropdown and click on next. It now appends "1" instead of incrementing.
  I hope this helps understand the issue.</p>