scope variable inside directive is not updating - angularjs

I have a simple directive for a table with pagination. The Pagination has a dropdown & a button. User can either select a page in the dropdown or click on the button to navigate. Say, the dropdown lists page numbers 1, 2, 3 and the selected page is 1. When user clicks on 'Next', the selected value in the dropdown should become 2.

Issue: When Next is clicked, though the scope variable SelectedPage is seen updated in the console, it is not reflecting in the view.

report.html:

<div>
<ul>       
   <li>
     <select ng-model="$scope.state.SelectedPage" ng-change="ShowPageResult()">
      <option ng-repeat="num in PageNumbers value="{{num}}">{{num}}</option>
     </select>
   </li>
   <li ng-click="ShowNextPage();"><a href=" #">Next</a></li>       
</ul>
<table>
...//some html
</table>
</div>

directive

app.directive('Report', function () {
    return {
        restrict: 'AE',            
        replace: 'true',
        templateUrl: '/views/report.html'            
    };
});

controller:

$scope.state={};
$scope.ShowPageResult = function () {
        GetReport($scope.state.SelectedPage);
    }
$scope.ShowNextPage = function () {
        $scope.state.SelectedPage = $scope.state.SelectedPage + 1;                
        GetReport($scope.state.SelectedPage);
    }

//get report data to bind to table
function GetReport(pageNumber) {
        $scope.UserReport = [];

        var promise = ReportsFactory.GetData();
        promise.then(function (success) {
            if (success.data != null && success.data != '') {                
                $scope.UserReport = success.data;                
                BindPageNumbers($scope.UserReport[0].TotalRows, pageNumber);              
            }            
        },
        function (error) {
            console.log(error);
        });
    }

  //bind page numbers to dropdown in pagination
    function BindPageNumbers(totalRows, selectedPage) {        
        $scope.PageNumbers = [];
        $scope.LastPageNumber = Math.ceil((totalRows / 10));
        for (var i = 1; i <= Math.ceil((totalRows / 10)) ; i++) {
            $scope.PageNumbers.push(i);
        }
        $scope.state.SelectedPage = selectedPage; //can see the no. becomes 2 here.            
    }