title: Angular Directive Two Way Binding Not Working
body: <p>I am trying to use the two way directive binding using "=" in the directive scope object, but its not working if I update the value within a callback function inside the link function (Not getting updated in the controller).</p>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>app.directive("simpleDropdown",function($document,$compile){
      return {
          scope:{
              content:"=",
              array:"="
          },
          restrict:'EA',
          template:'&lt;span class="simple-dropdown"&gt;&lt;ul class="dropdown-menu"&gt;&lt;li ng-repeat="i in array" data-index="{{$index}}"&gt;&lt;a&gt;{{i}}&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/span&gt;',
          compile:function(tElem,tAttrs){
              return function link(scope,elem,attrs){
  
                      //This is updated in the controller.
                      scope.content = scope.array[0];
  
  
                      var origin = angular.element(elem);
                      var dropdownSpan = origin.find(".simple-dropdown");
                      var dropdownMenu = $(dropdownSpan).find(".dropdown-menu");
                      dropdownSpan.prepend(scope.content);
                      var closeAllDropdowns = function(){
                          angular.element($document).find(".simple-dropdown .dropdown-menu").removeClass("show");
                      }
                      var handler = function(){
                              //close all dropdownMenus in simpleDropdown
                              closeAllDropdowns();
  
                          };
                      dropdownSpan.on("click",function(e){
                          e.stopPropagation();
                          closeAllDropdowns();
                          dropdownMenu.addClass("show");
                          var selectElement = function(event){
                              event.stopPropagation();
                              closeAllDropdowns();
                              console.log(scope.content);
  
  
                              //This is not updated
                              scope.content = angular.element(this).find("a").html();
  
  
                          };
                          dropdownMenu.find("li").off("click").on("click",selectElement);
                          $document.on("click",handler);
                          scope.$on("destroy",function(){
                          $document.off('click',handler);
                      });
                      }); 
  
              }
          }
      }
  });
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>var module = angular.module("dataemoApp",["multiAutocomplete","simpleDropdown"]);
  
  
  module.controller("mySuperAwesomeController",['$scope',function($scope){
  
  $scope.assignee = "Bhargav";
  $scope.assignees = [
      "Bhargav",
      "Akhilesh",
      "Utsav"
  ];
  }]);
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;simple-dropdown content="assignee" array="assignees"&gt; &lt;/simple-dropdown&gt; 
  </code></pre>
  
  <p>Scope.$apply does not work either. Am I missing something here? Please let me know. Thanks.</p>