So I'm new to Angularjs, but I'm trying to write the code for a comment area where users can put their comments. For this I'm using a div element with conteneditable="true" property. Here's my code for html:
<html>
<script src="./includes/angular.min.js"></script>
<script src="./includes/angular.route.js"></script>
<script src="./includes/angular.sanitize.js"></script>
<script src="./includes/test.js"></script>
<body ng-app="testapp" ng-controller="cnt1">
<div contenteditable="true" ng-model='comment'>{{comment}} </div>
<input ng-model='comment' type='text'/><br>
<div>{{comment}}</div>
</body>
</html>
and here is the .js code
/// <reference path="./angular.min.js"
/// <reference path="./angular.route.js"
/// <reference path="./angular.sanitize.js"
/// <reference path="./jq/jquery-2.0.3.min.js"
/// <reference path="./moment.min.js"
/// <reference path="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"
var app = angular.module("testapp", ['ngRoute', 'ngSanitize']);
app.controller("cnt1", function ($scope, $http, $rootScope, $timeout) {
$scope.comment = "type here";
});
I don't understand why ng-model updates the "comment" variable in the input element but it does not update the variable for the div element! Any help is appreciated! And if $apply() can fix this, how should I use it so it updates the "comment" variable in the div element?
