angular material md-country-select not binding with ng-model

Question

I am using angular material and md-country-select for countries dropdown but it is not binding with ng-model.

<md-country-select ng-model="user.country"></md-country-select>

Is this a bug or I am doing something wrong.

I already used ng-country-select and it is working great but I need md-country-select because of some design dependencies with angular material. Any thoughts ?

here is the link https://plnkr.co/edit/QdV3ZeEhK3aP16JfWF2S?p=preview — Qubaish Bhatti, Mar 31 '17 at 17:39

score 1 · Answer 1 · answered Mar 31 '17 at 11:57

This directive uses controller as syntax, so you should be able to retrieve the selected country using something like this:

<md-country-select></md-country-select>
<md-card>
     {{vm.country.name}}
</md-card>

In your controller you can use $watch:

 $scope.$watch('vm.country', function(val) {
    console.log(val); // returns object: {code: "AS", name: "American Samoa"}
 });

I actually cannot find any documentation on this directive, but I have created a quick demo. Perhaps someone else knows of better way to acheive this...

angular material md-country-select not binding with ng-model

1 Answers1