title: Angularjs Custom directive using directive controller variable
body: <p>I created a custom directive in which I have an array that I need to use in other views. for example, say I have an input box in my directive content that I have to use it's value in another controller, how can I achieve that? I tried to use ng-model but I was not successful.</p>
  
  <p>here is my controllers:</p>
  
  <pre><code>angular.module("demo", []);
  
  angular.module("demo").controller("demoController", function ($scope) {
      $scope.name = "John";
  });
  
  angular.module("demo").controller("directiveController", function ($scope) {
  
      $scope.name = "John Doe";
  
  });
  
  
  angular.module("demo").directive("passVariable", function () {
      return {
          restrict: 'AEC',
          require: "ngModel",
          templateUrl: "content.html",
          link: function (scope, element, attr, ngModel) {
              scope.$watch(function () {
                  return ngModel.$modelValue;
              },
              function (modelValue) {
                  console.log(modelValue);       
              });
  
          }
      }
  });
  </code></pre>
  
  <p>and the HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-app="demo" ng-controller="demoController"&gt;
      &lt;div&gt;
        &lt;pass-variable ng-model="name"&gt;&lt;/pass-variable&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div&gt;
          Second directive textbox:       &lt;input type="text" ng-model="name" pass-variable="" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div&gt;
          Main textbox:       &lt;input type="text" ng-model="name" /&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>and content.html</p>
  
  <pre><code>&lt;div ng-controller="directiveController"&gt;
      Content Textbox: &lt;input type="text" ng-model="name"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my plunker: <a href="http://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview" rel="nofollow">http://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview</a></p>
  
  <p>BTW, I don't know why plunker does not load content.html</p>
  
  <p><strong>UPDATE</strong> I've figured out I should add the controller in directive <code>controller: directiveController</code> and remove the <code>ng-controller='directiveController'</code> in <code>content.html</code></p>