Question

I think I’m missing something simple (and important) here. I’m using an included template that contains an input that’s mapped to some value:

<div ng-controller="Ctrl">
    <div ng-include src="'template.html'"></div>
</div>

<!-- template -->
<script type="text/ng-template" id="template.html">
    <input ng-model="testvalue" />
</script>

Controller:

function Ctrl($scope) {    
   $scope.testvalue= "initial value";
}​

Alerting the value of $scope.testvalue always shows the initial value, not the updated value (when you type in the input). Help me Obi-Wan. You’re our only hope.

Fiddle: http://jsfiddle.net/h5aac/

Answer 1

This is the all too common of binding to a primitive instead of an object. The value of the string gets passed around and not a reference to an object. If you use an object instead of a primitive, it works fine. Something like this in your scope.

$scope.foo = {testvalue: "initial value"};

See http://jsfiddle.net/h5aac/2/

Also:

Using `ng-model` within a transcluded directive in AngularJS

binding issue when a directive in a ngRepeat

AngularJS – updating scope value with asynchronous response

I’m sure there are more…