$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:

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

When typing in the textbox, the content of the span updates as expected reading. But when clicking the button, phoneNumber has not updated inside the controller:

app.controller('myPopopCtrl', ['$scope', '$modalInstance',
  function ($scope, $modalInstance) {
      $scope.phoneNumber= '';    

      $scope.click = function() {
        alert($scope.phoneNumber); // alerts only ''
      };

Is there some newbe mistake you can make in angular which makes stuff not updating on the $scope inside a controller?

Are there some $scope issues with the angular-ui modal I need to be aware of?

Edit:

It seems like phoneNumber gets created in 2 scopes. One time in the scope at the blue arrow which where phoneNumber: '' and once in the child scope at the red arrow. The view uses the phoneNumber in the child scope and the controller uses the phoneNumber in the parent scope...

enter image description here

Why are two scopes created?

click method is defined inside the popupController, (I updated the question to clarify) — Cotten
– Cotten, Commented Oct 16, 2013 at 11:29
Then the better options for you would be to pass a object instead of string as string assigment creates a new string in the child scope. Create something like $scope.phone={number:null} and pass it along. — Chandermani
– Chandermani, Commented Oct 16, 2013 at 12:03

Chandermani · Accepted Answer · 2013-10-16 12:22:42Z

15

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.

answered Oct 16, 2013 at 12:22

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cotten Over a year ago

would never have guessed those issues existed in angular.. Thank you :)

ThrowsException Over a year ago

This was hours upon hours of heartbreak trying to figure out why my modal wasn't working until I stumbled upon this, Thank you.

Boycott Russia · Accepted Answer · 2014-02-02 12:08:44Z

1

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.

answered Feb 2, 2014 at 12:08

Boycott Russia

12.2k5 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related