Stop two way data binding on angular directive
<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>