Binding the placeholder to the model causes ng-change to execute on load in IE

Question

Using angularjs, if I bind the placeholder of an input to its model, the change event is fired when the document loads in IE. This does not appear to be correct and I'm not seeing this behavior in other browsers.

JS Fiddle

Html:

<div ng-app="angularjs-starter" data-ng-controller="MainCtrl">
<div data-ui-view="viewMain">
    <input 
    placeholder="{{theValue}}" 
    data-ng-model="theValue" 
    data-ng-change="valueChanged(theValue)" />            
</div>

Javascript:

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {  
    $scope.valueChanged = function(theValue) {
        alert("Value Change Called On Load in IE.");
    };
});

Answer 1

It's possible to use the built-in ng-attr-placeholder directive as well.

ng-attr-placeholder="{{theValue}}"