How to dynamically update popover content AngularJS Bootstrap
<p>I use custom AngularJs directive for create bootstrap popover but when make popover popover content can't change and it's fix .</p>

<pre><code> app.directive('nextLevel', function () {
        return {
            restrict: 'EA',
            template: '&lt;a ui-sref="register" tabindex="0" linkdisabled="{{type}}"
 class="btn btn-block btn-success ng-class: {disabled: !(type)}" role="button" &gt;next&lt;/a&gt;',
            link: function (scope, el, attrs){
                $(el).popover({
                    trigger: 'click',
                    html: true,
                    toggle:'popover',   
                    title: 'notice !!',
                    content: attrs.popoverHtml,
                    placement: 'top'
                });
            }
        };
    });
</code></pre>

<p>my html is :</p>

<pre><code>&lt;next-level id='pop' popover-html='{{typeMessage}}'&gt;&lt;/next-level&gt;
</code></pre>

<p><strong><em>typeMessage</em></strong> should be change depending on user behavior but it's only show initial message and not change content when popover open .</p>