Binding placeholder to model causes ng-change to execute when loading in IE

Question

Using angularjs, if I associate an input placeholder with its model, the change event is fired when the document loads in IE. This does not seem to be correct, and I do not see 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

You can use the built-in ng-attr-placeholder directive.

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

Answer 2

I know this is old, but just in case someone else works with it, I created a small directive that includes placing the dynamic value in the placeholder and instead assigns it when changing:

 .directive('dynamicPlaceholder', function() { return { restrict: 'A', link: function ($scope, element, attrs) { attrs.$observe('dynamicPlaceholder', function(value) { element.attr('placeholder', value); }); } }; }); 

Then, to use this, all you have to do is use dynamic-placeholder instead of placeholder :

 <input ng-model='someValue' dynamic-placeholder='{{someDynamicPlaceholder}}' /> 

Not sure what causes the problem in IE though