How to prepopulate ngModel in AngularJS


I have no idea how to pre-populate an ng-model in this circumstance that I have to use ngBind. I tried ng-init, but it's not working.

        <h6 ng-show="isOwner" ng-bind="currentMagazine.magazine_name" 
        contenteditable ng-model="currentMagazine.magazine_name" 

I have a seperate directive that binds contenteditable attributes to ngModelController.

The problem now is whenever I update the model, ng-bind will jump out and refresh the div element, resulting in the cursur going back to the beginning of the text, which makes it impossible for any user to type.

I tried ng-init in a fashion like this:

<div ng-init="magazineName = currentMagazine.magazine_name">
    <h6 ng-show="isOwner"  
     contenteditable ng-model="magazineName" 

It's not working. If I don't use ng-bind, then no text will show up.

Also I notice it might be related to this problem, when I type with space or delete key, they are escaped into HTML you get result like this:

enter image description here

Hopefully both of my problems can be solved! Thank you (it's a very frustrating day)!

Problem courtesy of: Allen Nie


In your app.js do this:

$scope.magazineName = $scope.currentMagazine.magazine_name;

In your HTML do something like this:



<h6 ng-show="isOwner"

... though perhaps not, it's a bit difficult to gauge without seeing it... please make a jsfiddle or plunkr if you'd like to get more eyes on it.

If you're just trying to make some large text that is still editable and bound to the model it may be easier to just style an input for your needs.

Decided to play with contenteditbale since it's chance for me to learn something too... I can't seem to recreate the issue though:

I saw after doing this it wasn't updating the model, found another SO post that resolves that and included the changes here:

Solution courtesy of: shaunhusain


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.