Assigning a Default Value to a Model

Problem

You wish to assign a default value to the scope in the controller’s context.

Solution

Use the ng-controller directive in your template:

<div ng-controller="MyCtrl">
  <p>{{value}}</p>
</div>

Next, define the scope variable in your controller function:

var MyCtrl = function($scope) {
  $scope.value = "some value";
};

Discussion

Depending on where you use the ng-controller directive, you define its assigned scope. The scope is hierarchical and follows the DOM node hierarchy. In our example, the value expression is correctly evaluated to some value, since value is set in the MyCtrl controller. Note that this would not work if the value expression were moved outside the controllers scope:

<p>{{value}}</p>

<div ng-controller="MyCtrl">
</div>

In this case {{value}} will simply be not rendered at all due to the fact that expression evaluation in Angular.js is forgiving for undefined and null values.

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!