Getting value from ngModel in directive when using object with property

Question

Not sure how to phrase the question so please edit if you can come up with something better. I have the following directive:

app.directive('foo', function() {
    return {        
        restrict: 'A',
        require: "?ngModel",
        link: function (scope, element, attrs, controller) {
            scope.$watch(attrs.ngModel, function () {
                console.log("Changed to " + scope[attrs.ngModel]);
            });
        }
    };
});

When I have this it works great and logs properly

<input type="text" ng-model="bar" />

app.controller('fooController', function($scope) { 
    $scope.bar = 'ice cream';
});

It doesn't work when I try it this way around. It keeps logging 'Changed to undefined'

<input type="text" ng-model="model.bar" />

app.controller('fooController', function($scope) { 
    $scope.model = { bar: 'ice cream' };
});

How do I make it work for both scenarios. It seems the right thing to do seeing as angular lets you use both.

Answer 1

I looked at ngModel directive and found a function called ngModelGet. Uses $parse.

app.directive('foo', function($parse) {
    return {        
        restrict: 'A',
        require: "?ngModel",
        link: function (scope, element, attrs, controller) {
            var ngModelGet = $parse(attrs.ngModel);

            scope.$watch(attrs.ngModel, function () {
                console.log("Changed to " + ngModelGet(scope));
            });
        }
    };
});

Answer 2

your can use

var ngModelCtrl = controller;
ngModelCtrl.$viewValue

replace

scope[attrs.ngModel]

here is ngModelCtrl sdk