Changing placeholder via AngularJS directive?
<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>