ng-model binding not working on div

Question

The two binding of AngularJS is not working on div. I want my div to be editable but it's not happening. Could anybody please suggest what could be wrong? The same binding works fine on textbox. This is my code:

<input type="text" ng-model="userProfile.firstName"/>
<div class="profile-name" contenteditable="true" ng-model="userProfile.firstName"></div> 

Answer 1

Please try this, it might help https://github.com/angular/angular.js/issues/528

This is a 3 year old open issue that tons of people would like fixed. It's marked as a post-1.2-milestone and a feature rather than a bug. Seeing as Angular.js is on release 1.2.13 as of Feb 2014, it looks like no one on the team cares about this issue at the moment. As a result you'll be better off rolling your own code or sticking with a input/textarea control.

Answer 2

that's the correct behaviour. from angular docs "ng-model Is a directive that tells Angular to do two-way data binding. It works together with input, select, textarea. You can easily write your own directives to use ngModel as well."

in other words, if you want it to work with a div declare a directive which binds the model to the innerhtml of the div. docs here

Answer 3

use ng-bind.

<ANY
  ng-bind="expression">
...
</ANY>

Check https://docs.angularjs.org/api/ng/directive/ngBind.