$scope.myVariable not updated in controller for angular-ui bootstrap modal

Question

In my view I have an input, a span and a button like so:

Answer 1

ng-include creates a new scope. So pass a object instead of string

$scope.phone={number:null}

The template then looks like

<script type="text/ng-template" id="myTemplate.html">
  <input type="text" ng-model="phone.number">
  <span>{{ phone.number}}</span>
  <input type="button" ng-click="click()">
</script>

Look at this wiki to understand the issues with prototypal inheritance.

Answer 2

Had the same problem and after a few experiments I've settled on writing

<input type="text" ng-model="$parent.phoneNumber">

This way input is bound to the blue scope, which is exactly what you wanted.

Other way is to initialise phoneNumber with a true-ish value. Try $scope.phoneNumber= '123'; - worked fine for me.

Angular seems to walk up the scope tree looking for an attribute to bind to. If nothing's found - it binds to the inner-most scope, red scope in your pic. As other answer suggests - this red scope is created by ng-include, as a child of controller's $scope.