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...
Why are two scopes created?