Set Default Value to ng-bind in HTML

Question

I'd like to set a default value to scope, which is picked up by ng-bind. I am doing this like:

<button>Show <span data-ng-bind="data.text" data-ng-init="data.text = 'All';"></span> Names</button>

In this example, the span is set to innerHTML = 'All' when the page loads.

However, I was hoping there might be a way to do this without requiring the use of ng-init, maybe something like:

<button>Show <span data-ng-bind="data.text = 'All';"></span> Names</button>

Answer 1

In your controller:

$scope.data = {};
$scope.data.text = "All";

Your markup:

<button>Show <span data-ng-bind="data.text"></span> Names</button>

Or, if you want to skip the controller code (courtesy of Kohjah Breese' comment):

    <button>Show <span data-ng-bind="data.text || 'All'"></span> Names</button>

Presumably there will be some code elsewhere in your controller that will toggle this value, but for the purposes of initializing, that should do.

EDIT: Alternately, as tymeJV points out in the comments (ng-cloak added so {{}} syntax doesn't display to users):

<button>Show <span ng-cloak>{{data.text || "All"}}</span> Names</button>