title: AngularJS directive two-way binding not working in Ionic
body: <p>I cannot for the life of me wrap my head around this issue; I can't even figure out if it's a problem with AngularUI Router or Ionic itself.</p>
  
  <p>I'm trying to accomplish two-way binding (i.e. <code>scope: {data: "="}</code> in the directive definition) with a custom AngularJS directive, it works perfectly as demonstrated by <a href="http://jsfiddle.net/axedre/7qp7hxah/" rel="nofollow">this jsfiddle</a> but the same exact code used in my particular context (i.e.: I navigate through two states before I get to the page with the "Change data" button) doesn't (<a href="http://jsfiddle.net/axedre/ef36wee7/" rel="nofollow">jsfiddle here</a>).</p>
  
  <p>SO prompts me to add some code to go along the jsfiddle links, so here goes the working version.</p>
  
  <p>Page:</p>
  
  <pre><code>&lt;!-- HTML --&gt;
  &lt;body ng-app="myApp"&gt;
      &lt;div ng-controller="MyCtrl"&gt;
          &lt;signature data="signatureData"&gt;&lt;/signature&gt;
          &lt;button ng-click="changeData()"&gt;Change data!&lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>//JS
  angular.module("myApp", [])
  .controller("MyCtrl", ["$scope", function ($scope) {
      $scope.changeData = function() {
          console.log("Outside directive:", $scope.signatureData);
          $scope.signatureData = "hello";
      };
  }])
  .directive("signature", [function() {
      var directiveDefinitionObject = {
          template: "&lt;div&gt;Don't mind me, I'm just a template...&lt;/div&gt;",
          scope: {
              data: "="
          },
          controller: ["$scope", "$element", function($scope, $element) {
              $scope.data = "ciao";
              $scope.$watch("data", function(d) {
                  console.log("Inside directive:", d);
              });
          }]
      };
      return directiveDefinitionObject;
  }]);
  
  /* Console output when clicking button:
  Inside directive: ciao
  Outside directive: ciao
  Inside directive: hello
  */
  </code></pre>
  
  <p>Same code, though placed into context, in the second fiddle which is far too verbose to paste here (I apologize for that, I already skimmed it as much as possible but it's just to give an understanding of the issue in case it helps).</p>
  
  <p>The console output, however, is:</p>
  
  <pre><code>/* Console output when clicking button:
  Inside directive: ciao
  Outside directive: undefined
  */
  </code></pre>