angularjs - ng-switch does not bind ng-model

angularjs, ng-switch

Solution

This is a scope inheritance problem due to `ng-switch` creating its own scope.

One recommendation made often is always to use a `dot` on models. The reason is that when the controller scope item is an object and not a primitive, sub scopes will create a reference to the initial object. If model is a primitive it will not update the original.

For example:

<input ng-model="test.value" placeholder="pre" type="text" />

$scope.test={value:''}

Another approach is to use `$parent` in html model markup:

<input ng-model="$parent.test" placeholder="pre" type="text" />

Using the `dot` methodology is a good practice to avoid these issues as you don't need to think about deeper nested scopes.

Demo using `test.value` as model: http://plnkr.co/edit/CkiF55bLXsYzR6ZjcrJp?p=preview

Reference regarding `dot` in models(valuable reading): https://github.com/angular/angular.js/wiki/Understanding-Scopes

Problem

Original source