AngularJS model update but view not updating

Question

If I update model from input field the view also update properly.

here's the code

  <div class="form-group">
   <input type="number" ng-model="optionsOfDirective.startSlide"class="form-control">
  </div>

and the model is

        $scope.optionsOfDirective = {
                startSlide: 0
            };

and the picture But if I update the model data on mouse click through controller the model value got updated and the view also but after a second the view return to it's previous stage.

Here's the ng-click code

<div>
   <a class="btn btn-primary btn-block" role="button" data-slide="next"
 ng-click="btnClickCounter();" ng-model="optionsOfDirective.startSlide">      Next </a>

And the model update

$scope.btnClickCounter = function () {
  $scope.optionsOfDirective.startSlide=7;
};

Why the view is not remaining same if i set value in controller.