title: Angular - Change to inherited scope variable from parent not changing the variable in parent
body: <p>I have a parent controller where I have initialized a scope variable x = false. In the html that it refers to, I'm checking its value to show/hide an element. I'm also changing its value based on an ng-click.</p>
  
  <p>within controller - </p>
  
  <p>$scope.x= false;</p>
  
  <p>within its html - </p>
  
  <pre><code>&lt;div ng-if="x" ng-click="x= true"&gt;
  
      &lt;my-directive x="x"&gt;&lt;/my-directive&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I have a directive referred in it as well which inherits the "x" variable into its scope. </p>
  
  <p>Directive definition:</p>
  
  <pre><code>'use strict';
  angular.module('myApp')
      .directive('srcCommmandBar', ['myService', myDirective]);
  
  
  function myDirective(myService){
      return {
          restrict : 'E',
          scope : {x: "="},
          replace: false,
          transclude: false,
          templateUrl: '&lt;button ng-click="x = false"&gt;&lt;/button&gt;',
          link: function(scope, element, attrs){
  
  
          }
  
      };
  }
  </code></pre>
  
  <p>The template for the directive simply has a button which when clicked on changes the value of the scope variable, x to false.</p>
  
  <p>My problem is that although it changes in the child scope "x", it does not change the parent scope "x". My understanding was that because of 2 way binding, the change in x will be cascaded to the parent. Am I wrong? How can I make this work?</p>