title: Changing placeholder via AngularJS directive?
body: <p>I have a text input field whose placeholder I want to change every few seconds. However I don't want to pollute my controller with this so I want to encapsulate this functionality into a directive. </p>
  
  <p>This is what my directive looks like:</p>
  
  <pre><code>myApp.directive('searchBox', ['$interval', function($interval) {
      return {
          restrict: 'A',
          link(scope, element, attrs) {
              $interval(function() {
                  attrs.placeholder = 'New';
              }, 1000);
          }
      }
  }])
  </code></pre>
  
  <p>And the html:</p>
  
  <pre><code>&lt;input type="text" class="form-control" placeholder="Old" ng-model="search" search-box&gt;
  </code></pre>
  
  <p>However the placeholder stubbornly doesn't change, even though in the console <code>attrs.placeholder</code> can be seen to change to 'Test' from 'Hello'. Any ideas?</p>
  
  <p><a href="https://plnkr.co/edit/Oy1M8FPTXxzB9oYMJqlx?p=preview" rel="nofollow"><strong>PLUNKR</strong>: https://plnkr.co/edit/Oy1M8FPTXxzB9oYMJqlx?p=preview</a></p>