Changing a Model Value with a Controller Function

Problem

You wish to increment a model value by 1 using a controller function.

Solution

Implement an increment function that changes the scope.

function MyCtrl($scope) {
  $scope.value = 1;

  $scope.incrementValue = function(increment) {
    $scope.value += increment;
  };
}

This function can be directly called in an expression, in our example we use ng-init:

<div ng-controller="MyCtrl">
  <p ng-init="incrementValue(1)">{{value}}</p>
</div>

Discussion

The ng-init directive is executed on page load and calls the function incrementValue defined in MyCtrl. Functions are defined on the scope very similar to values but must be called with the familiar parenthesis syntax.

Of course, it would have been possible to increment the value right inside of the expression with value = value +1 but imagine the function being much more complex! Moving this function into a controller separates our business logic from our declarative view template and we can easily write unit tests for it.

Checkout my new project:

Vue.js Component Patterns Book

The goal of this course is to teach you the fundamentals to make Vue.js components that are simpler, more flexible and most of all fun to build and use!