angularjs - div - contenteditable ngmodel angular 2

Two way binding of contenteditable item inside ng-list (2)


Here's an example based on the example in the Angular docs which just uses ng-repeat. Since ng-repeat creates a new scope for each iteration, it shouldn't be a problem.

<!doctype html>
<html ng-app="form-example2">
    <script src=""></script>
    angular.module('form-example2', []).directive('contenteditable', function() {
        return {
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {
                // view -> model
                elm.bind('blur', function() {
                    scope.$apply(function() {

                // model -> view
                ctrl.$render = function() {

                // load init value from DOM
    <div ng-repeat="i in [1, 2, 3]">
        <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
        <pre>model = {{content}}</pre>
    <style type="text/css">
    div[contentEditable] {
        cursor: pointer;
        background-color: #D0D0D0;


There's an example of how you can do just that here:

It's under the "Implementing custom form controls (using ngModel)" header.

I am looking to update Phone Name in a list of phones using contenteditable attribute. I have tried using ng-change but thats not getting fired. Is there any way I can do this?

I have a list of Store.Phones

<ul class="store">
  <li ng-repeat="Phone in Store.Phones">
     <strong contenteditable> {{Phone.Name}}</strong>

So now when I edit Phone name I need to get it updated in the list.

I have tried something like this with model pointing to the element. This is not working.

<strong ng-model='Store.Phones[$index].Name'> {{Phone.Name}}</strong>


<strong ng-model='PhoneName' ng-change='PhoneNameChanged()'> {{Phone.Name}}</strong>

but in this case the method is not getting fired.