 <p>Yes, multiple directives creating their own isolate and/or child scopes (both could require <code>scope: true</code>, though) is not allowed, which is unfortunate, if only because with <code>scope: {}</code> binding to attributes is so effortless.</p> <p>But, you could still achieve the same result by doing a bit more manual work and using the <code>$parse</code> service. Here's an illustrative example of how to achieve two-way binding:</p> <pre><code>.directive("foo", function($parse){ return { restrict: "A", link: function(scope, element, attrs){ var fooGetFn = $parse(attrs.foo), fooSetFn = fooGetFn.assign; var foo0 = fooGetFn(scope); // get the current value of foo expression // watch for changes in foo expression scope.$watch( function(){ return fooGetFn(scope); }, function fooWatchAction(newVal, oldVal){ // do whatever needed }); // set value to foo expression, if it's assignable if (fooSetFn) fooSetFn(scope, "abc"); } } }); </code></pre> <p>You could do the same with <code>bar</code> and have them working side-by-side:</p> <pre><code>&lt;div foo="vm.p1" bar="vm.p2"&gt; </code></pre> <p>In your specific case, you don't even need to assign the value back since you are only assigning to properties of the bound object (which you only need to get), so it is simpler.</p> <p>Here's your forked <strong><a href="http://jsfiddle.net/7an9dc9o/" rel="nofollow">fiddle</a></strong> that works.</p>