SO - Binding to Subproperty

by Jeremy Likness

HTML

<div ng-app="myApp" ng-controller="myController">
    <div>Name: {{foo.name}}</div>
    <div>Color: {{foo.color}}</div>
    <mini-Directive target="foo.name"></mini-Directive> 
    <mini-Directive target="foo.color"></mini-Directive>
</div>

JavaScript

var app = angular.module("myApp", []);
app.directive("miniDirective", function () {
return {
    restrict: "E",
    scope: {
        target: "="        
    },
    template:'<div>{{target}}</div>' + 
             '<input type="text" ng-model="target">',
    compile: function (scope, elm, iAttrs) {
        
    }
};
});
app.controller("myController", function($scope) {
    $scope.foo = { name : "Jeremy", color: "Red" };
});