title: Update UI based on change of a directive attribute in AngularJs
body: <p>I am struggling with data binding in AngularJs.</p>
  
  <p>I have the following piece of markup in .html file that includes the custom directive:</p>
  
  <pre><code>&lt;my-directive ng-repeat="i in object" attr-1="{{i.some_variable}}"&gt;&lt;/my-directive&gt;
  </code></pre>
  
  <p><strong>Note</strong>: 'some-variable' is being updated every 10 seconds(based on the associate collection and passed to template through controller).</p>
  
  <p>The directive's code includes:</p>
  
  <pre><code>myApp.directive('myDirective', function () {
  
    scope: {
     'attr-1': '=attr1'
  </code></pre>
  
  <p>which <a href="https://docs.angularjs.org/error/$parse/syntax?p0=i&amp;p1=is%20unexpected,%20expecting%20%5B:%5D&amp;p2=4&amp;p3=%7B$%20i.some_value%20$%7D&amp;p4=i.some_value%20$%7D" rel="nofollow noreferrer">throws this exception</a> because of the brackets in attr-1(see html code above).</p>
  
  <p>It works though if I use read-only access(note at sign below):</p>
  
  <pre><code>myApp.directive('myDirective', function () {
  
    scope: {
     'attr-1': '@attr1'
  </code></pre>
  
  <p>I use scope.attr-1 in directive's HTML to show its value.</p>
  
  <p>The problem is that with read-only access UI is not reflecting the change in attribute change.</p>
  
  <p>I've found <a href="https://stackoverflow.com/questions/21408274/angularjs-binding-a-variable-in-template-to-increase-performances">solution</a> with $parse or $eval(couldn't make them work tho). Is there a better one there?</p>