Angular $scope variable not updating : <p>In my angular, I define a scope variable <code>$scope.letter_content</code>. When the view is loaded, I load string from my database and set it to <code>$scope.letter_content</code>. Then, I populate on a texteditor(Froala) i'm using.</p>

<p>Below is the code for the view:</p>

<pre><code>    {{letter_content}}
    &lt;div ng-if="formData['page_number'] == 1 "&gt;
        {{letter_content}}
        &lt;textarea id="froala-sample-2" froala="froalaOptions" ng-model="letter_content"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
</code></pre>

<p>So basically I set <code>letter_content</code> as ng-model for the texteditor. So when I make changes on the texteditor, it modifies the value <code>$scope.letter_content</code>. </p>

<p>One thing I found it weird is that when I modify the text in the texteditor, it changes <code>{{letter_content}}</code> inside the div. However, it does not update <code>{{letter_content}}</code> outside the div. </p>

<p>When I'm done editing the text in my texteditor, I send send a put request to update the value in the database with <code>$scope.letter_content</code>. However, it ends up sending <code>{{letter_content}}</code> outside the div which ends up not updating the content. </p>

<p>Why is this weird thing happening?</p>
