title: Stop two way data binding on angular directive
body: <p>I want to pass information to a directive like this:</p>
  
  <pre><code>&lt;ui-message data="{{app}}"&gt;&lt;/ui-message&gt;
  </code></pre>
  
  <p><strong>Where in my controller I have the following:</strong></p>
  
  <pre><code>app.controller("testCtrl", function($scope) {
    $scope.app = "Hello World!"
  })
  </code></pre>
  
  <p><strong>And my directive:</strong></p>
  
  <pre><code>app.directive("uiMessage", function() {
    return {
      template: "&lt;h1&gt;{{message}}&lt;/h1&gt;",
      scope: {
        message: "@data"
      }
    }
  })
  </code></pre>
  
  <p>That works fine, except that if <code>app</code> is bound to a model, it'll update the content inside the directive:</p>
  
  <pre><code>&lt;input ng-model="app"&gt; //typing here changes the content inside ui-message
  &lt;ui-message data="{{app}}"&gt;&lt;/ui-message&gt;
  </code></pre>
  
  <p>How can I prevent this from happening?</p>