Communication between Controller and Directive in angularjs
<p>I am trying to create a small app using AngularJS which consists of users and issues posted by the users respectively. </p>

<p>I am trying to show issues when a particular user is clicked. </p>

<p>I have created the following code so far:</p>

<p><strong>index.html</strong></p>

<p></p>

<pre><code>  &lt;div class="container" ng-controller="issueContainer as issueTrack"&gt;

      &lt;div class="leftContainer" ng-controller="issueForm as issueformCtrl"&gt;
          &lt;issue-form&gt;&lt;/issue-form&gt;

          &lt;user-issues ng-repeat="issue in user.issues"&gt;&lt;/user-issues&gt;    
      &lt;/div&gt;

      &lt;div class="rightContainer" ng-controller="userForm as userformCtrl"&gt;

          &lt;form name="userform" ng-submit="userform.$valid &amp;&amp; userformCtrl.addUsers()"&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="addUser"&gt;Username&lt;/label&gt;
                &lt;input type="text" id="addUser" ng-model="userformCtrl.name" class="form-control" placeholder="Username"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;input type="submit" class="btn btn-primary" value="Submit" /&gt;
              &lt;/div&gt;
          &lt;/form&gt;

          &lt;h3 class="usersTitle"&gt;Users&lt;/h3&gt;

          &lt;div class="users" ng-show="issueTrack.users.length"&gt;
              &lt;div ng-repeat="user in issueTrack.users track by $index" value="{{user.username}}" ng-click="userformCtrl.userclickCtrl(user.username)"&gt;
                  {{user.username}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p></p>

<p><strong>app.js</strong></p>

<pre><code>(function(){

var app = angular.module("Issuetracker",[]);

var users=[];

if (localStorage.getItem('users')!==null){

    users = JSON.parse(localStorage.getItem("users"));
    console.log(users);
}

app.controller("issueContainer", function(){

    var issuetrack = this;
    this.users = users;

});

app.controller("userForm", function(){

    this.addUsers = function(){

        users.push({'username':this.name, 'issues':[]});
        this.name='';
        console.log(users);
        localStorage.setItem("users", JSON.stringify(users));
    };      

    this.userclickCtrl= function(data){

        var allUsers = JSON.parse(localStorage.getItem("users"));

        for(var i=0;i&lt; allUsers.length;i++){

            if(allUsers[i].username == data){

                var userData = allUsers[i];
                break;
            }
        }
    };
});

app.controller("issueForm", function(){

    this.issue={};
    this.addIssues = function(){

        console.log(this.issue);
        var allUsers = JSON.parse(localStorage.getItem("users"));

        for(var i=0;i&lt; allUsers.length;i++){

            if(allUsers[i].username == this.issue.User){

                allUsers[i].issues.push(this.issue);
                break;
            }
        }            

        this.issue={};

        localStorage.setItem("users", JSON.stringify(allUsers));
    };                
});

app.directive("userIssues", function(){

   return{

        restrict: 'E',
        templateUrl: 'userissues.html'
   }  
});

app.directive("issueForm", function(){

   return{

        restrict: 'E',
        templateUrl: 'issueform.html' 
   }  
});

})()
</code></pre>

<p><strong>userissues.html</strong></p>

<pre><code>&lt;div class="issues"&gt;
    &lt;div ng-repeat="issue in user.issues"&gt;
        &lt;h3&gt;{{issue.Summary}}&lt;span class="label label-primary" style="margin-left:2%"&gt;{{issue.Type}}&lt;/span&gt;&lt;/h3&gt;
        &lt;p&gt;{{issue.Description}}&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Whenever any user is clicked, <em>userclickCtrl</em> function is called where i am getting the user object from <code>localStrorage</code>and want to pass it to the userissues directive for the template. </p>

<p>Any leads would be appreciated!!!</p>