Reinitialize AngularJs After Ajax Request(Dynamic Contents)?

Question

I have,

<div ng-app="s" ng-controller="ProductCtrl">
    <div class="row" ng-bind-html="pager">
    </div>
    <div class="gallery-env">
        <div class="row">
            <div class="col-sm-4" ng-repeat="product in products">
                <article class="album">
                    <header>
                        <a href="javascript:">
                            <img data-ng-src="{{product.Image.Path}}" />
                        </a>
                        <a href="javascript:" class="album-options">
                            <i class="entypo-cog"></i>
                            Change Cover
                        </a>
                    </header>
                    <section class="album-info">
                        <h3><a href="javascript:">{{product.Name}}</a></h3>
                        <p>{{product.Id}} {{product.ShortDescription}}</p>
                    </section>
                </article>
            </div>
        </div>
    </div>
</div>
<script>
(function() {
    var app = angular.module('shopex', []);
    app.controller('ProductCtrl', function($scope, $sce) {
        $scope.products = @Html.Raw(products);
        $scope.pager = $sce.trustAsHtml('
        <ul class="pagination">
            <li class="disabled" title="First Page"><a data-index="1" href="javascript:" ng-click="getProducts($event)">&lt;&lt;</a></li>
            <li class="disabled" title="Previous Page"><a data-index="0" href="javascript:" ng-click="getProducts($event)">&lt;</a></li>
            <li class="active" title="1"><a data-index="1" href="javascript:" ng-click="getProducts($event)">1</a></li>
            <li title="2"><a data-index="2" href="/Product/List?pageIndex=2" ng-click="getProducts($event)">2</a></li>
            <li title="3"><a data-index="3" href="/Product/List?pageIndex=3" ng-click="getProducts($event)">3</a></li>
            <li title="4"><a data-index="4" href="/Product/List?pageIndex=4" ng-click="getProducts($event)">4</a></li>
            <li title="5"><a data-index="5" href="/Product/List?pageIndex=5" ng-click="getProducts($event)">5</a></li>
            <li title="6"><a data-index="6" href="/Product/List?pageIndex=6" ng-click="getProducts($event)">6</a></li>
            <li title="7"><a data-index="7" href="/Product/List?pageIndex=7" ng-click="getProducts($event)">7</a></li>
            <li title="8"><a data-index="8" href="/Product/List?pageIndex=8" ng-click="getProducts($event)">8</a></li>
            <li title="9"><a data-index="9" href="/Product/List?pageIndex=9" ng-click="getProducts($event)">9</a></li><li title="10"><a data-index="10" href="/Product/List?pageIndex=10" ng-click="getProducts($event)">10</a></li>
            <li title="Next Page"><a data-index="2" href="/Product/List?pageIndex=2" ng-click="getProducts($event)">&gt;</a></li>
            <li title="Last Page"><a data-index="4999" href="/Product/List?pageIndex=4999" ng-click="getProducts($event)">&gt;&gt;</a></li>
        </ul>'
    ');
        $scope.getProducts = function($event) {
            $event.preventDefault();
            var url = $event.target.href;
            $.getJSON(url, function(response) {
                $scope.$apply(function() {
                    $scope.products = response.products;
                    $scope.pager = $sce.trustAsHtml(response.pager);
                });
            });
        };
    });
    }());
</script>  

The problem is that I have dynamic content for pager. inside pager I have ng-click="getProducts($event)" which will execute $scope.getProducts function. But it's not working now.

Answer 1

Dynamically inserted html content needs to be compiled be the angular compiler service ($compile) if it contains angular directives. Conside using a directive for this kind of functionality and see here for more info.