Model in a modal window in angularjs is empty

Question

Hello I am using angularjs ui bootstrap and I have one text field in a modal window, which when I try to print it in alert window it is empty. Any reasons why? Here is a plu

Answer 1

Here is an updated plunker for you: http://plnkr.co/edit/tvE4DoovZ6NheYj1HMho?p=preview

When using the modal service with ui-bootstrap, you need to encapsulate your model in a container scope, eg:

$scope.form = { testValue: '' };

Also read this for more information about nested scopes: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Answer 2

Try to change the

• $scope.testField

into

• $scope.myModel.testField (or user.firstName...)

As mentioned in this video angular JS - best practice (29:19):

"Whenever you have ng-model there's gotta be a dot in there somewhere. If you don't have a dot, you're doing it wrong."

See updated plunker http://plnkr.co/edit/z1ABPEUB7Nxm1Kxey9iv?p=preview

NOTE: with a nice reminder of the video-minute from article Nested Scopes in Angular JS