Encapsulating a Model Value with a Controller Function

Problem

You wish to retrieve a model via function (instead of directly accessing the scope from the template) that encapsulates the model value.

Solution

Define a getter function that returns the model value.

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

  $scope.getIncrementedValue = function() {
    return $scope.value + 1;
  };
}

Then in the template we use an expression to call it:

<div ng-controller="MyCtrl">
  <p>{{getIncrementedValue()}}</p>
</div>

Discussion

MyCtrl defines the getIncrementedValue function, which uses the current value and returns it incremented by one. One could argue that depending on the use case it would make more sense to use a filter. But there are use cases specific to the controllers behavior where a generic filter is not required.

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!