scope variable not changing - angularjs -

the scope variable selectedpage not updating. there ul li pagination, has dropdown & next button. user can go page either clicking button or choosing option in select. when click on next or select 2 in dropdown, i'm expecting value of $scope.selectedpage change 2. remains 1.

html:

<ul>       <li>    <select ng-model="selectedpage" ng-change="showpageresult()">      <option value="1">1</option>      <option value="2">2</option>    </select>  </li>  <li ng-click="selectedpage = selectedpage + 1;showpageresult();"><a href=" #">next</a></li>  </ul> 

ctrl.js

$scope.showpageresult = function () {        console.log($scope.selectedpage); //always prints 1             }  

edit http://jsfiddle.net/g8plhf79/ after page loads, click on 'next', no. increments. select value in dropdown , click on next. appends "1" instead of incrementing. hope helps understand issue.

here go (2nd attempt): http://jsfiddle.net/g8plhf79/11/

i made minimal changes have code work in way, in general angular separating view model/controller you're encouraged keep logic separated view. anyway here way want it:

<div ng-app="app" ng-controller="ctrl"> <ul>     <li>         <select ng-model="selectedpage" ng-change="showpageresult();">             <option value="1">1</option>             <option value="2">2</option>         </select>     </li>     <li ng-click="selectedpage = (selectedpage * 1+1);showpageresult();"><a href=" #">next</a>      </li>     <li>selected page : {{selectedpage}}</li> </ul> </div> 

controller:

var app = angular.module("app", []); app.controller("ctrl", function ($scope) {     $scope.selectedpage = 1;     $scope.showpageresult = function () {         console.log($scope.selectedpage);     }  });