title: Angularjs isolated scope for directives without own template
body: <p>I want to create reusable directive in AngularJS without own template. I also want to have isolated scope for that directive. What is the best practices for my approach?
  Why my example doesn't work as I expect?</p>
  
  <p>I expected that I could edit obj1 and obj2 from directives separately.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
    X1: {{ obj1.x }}, Y1: {{ obj1.y }}
    X2: {{ obj2.x }}, Y2: {{ obj2.y }}
    &lt;hr&gt;
    Edit obj1: 
    &lt;div draggable target="obj1"&gt;
      &lt;input type="text" ng-model="target.x"&gt;
      &lt;input type="text" ng-model="target.y"&gt;
    &lt;/div&gt;
    Edit obj2:
    &lt;div draggable target="obj2"&gt;
      &lt;input type="text" ng-model="target.x"&gt;
      &lt;input type="text" ng-model="target.y"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS: </p>
  
  <pre><code>angular.module("App", [])
    .controller("MyCtrl", function($scope) {
      $scope.obj1 = {
        x: 10,
        y: 20
      };
      $scope.obj2 = {
        x: 30,
        y: 40
      };
    })
    .directive("draggable", function() {
      return {
        scope: {
          target: "="
        },
        link: function(scope, el, attrs) {
          console.log("scope: ", scope);
        }
      }
    });
  </code></pre>
  
  <p>PLUNKR:
  <a href="http://plnkr.co/edit/Dw8IiFVSOZGjSTFGRMzZ" rel="noreferrer">http://plnkr.co/edit/Dw8IiFVSOZGjSTFGRMzZ</a></p>