IONIC/ANGULARJS Dynamic html based on properties / data

Question

Im new to ionic v1, The goal is I'm creating a dynamic html page based on the data provided by a json data but the problem is the ng-reapeat is not rendering the images upon using the ng-bind-html.

Any suggestions on how to fix the problem?. The overall goal is I need to create a page with a category section (based on the data provided so it can be multiple) and a scrollable banner images inside.

Factory

.factory('HTMLManager', function () {
  return {
    vdeoPage: function ( ) {
        var htmlTemplate='<div class=\"item item-divider vdeo-header\"><h3>{CATEGORY}</h3></div><a class=\"item item-list-detail vdeo-table\"><ion-scroll direction=\"x\"><img ng-repeat="image in allImages" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb"/></ion-scroll></a><br/>';                            
        return htmlTemplate;
    }
  }
})

Controller

.controller('MediaCtrl', function($state, $scope, $ionicModal, VideoManager, HTMLManager, $sce) {

$scope.allImages = [{
        'src' : 'img/take1.png', 'category':'NEW', 'vdeo' : 'video/test1.mp4', 'title' : 'Test Title', 'synopsis_title' : 'Synop', 'synopsis' : 'Test synopsis', 'thumbnail' : 'img/test1.png',
    }, {
        'src' : 'img/trip1.png', 'category':'LATEST','vdeo' : 'video/test2.mp4', 'title' : 'Test Title 2', 'synopsis_title' : 'Synop2', 'synopsis' : 'Test synopsis2', 'thumbnail' : 'img/test2.png',
    }];

    $scope.vdeoHTML = $sce.trustAsHtml(HTMLManager.vdeoPage());
}

HTML
<ion-pane>
    <ion-content>
        <div ng-bind-html="vdeoHTML"></div>
    </ion-content>
</ion-pane>

Answer 1

By default ng-bind-html don't compile the provided html, so tou need to do it manually, for example using a directive.

var app = angular.module('app', ['ionic'])

.directive('dynamicImg', function($compile) {
    return {
      restrict: 'A',
      replace: true,
      link: function(scope, element, attrs) {
        scope.$watch(attrs.dynamicImg, function(html) {
          element[0].innerHTML = html;
          $compile(element.contents())(scope);
        });
      }
    }

  })
  .factory('HTMLManager', function() {
    return {
      vdeoPage: function() {
        var htmlTemplate = '<div class=\"item item-divider vdeo-header\"><h3>{CATEGORY}</h3></div><a class=\"item item-list-detail vdeo-table\"><ion-scroll direction=\"x\"><img ng-repeat="image in allImages" ng-src="{{image.src}}" ng-click="showImages($index)" class="image-list-thumb"/></ion-scroll></a><br/>';
        return htmlTemplate;
      }
    }
  })
  .controller('MediaCtrl', function($state, $scope, $ionicModal, HTMLManager, $sce) {

    $scope.allImages = [{
      'src': 'img/take1.png',
      'category': 'NEW',
      'vdeo': 'video/test1.mp4',
      'title': 'Test Title',
      'synopsis_title': 'Synop',
      'synopsis': 'Test synopsis',
      'thumbnail': 'img/test1.png',
    }, {
      'src': 'img/trip1.png',
      'category': 'LATEST',
      'vdeo': 'video/test2.mp4',
      'title': 'Test Title 2',
      'synopsis_title': 'Synop2',
      'synopsis': 'Test synopsis2',
      'thumbnail': 'img/test2.png',
    }];

    $scope.vdeoHTML = $sce.trustAsHtml(HTMLManager.vdeoPage());
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<ion-pane ng-app="app" ng-controller="MediaCtrl">
  <ion-content>
    <div dynamic-img="vdeoHTML"></div>
  </ion-content>
</ion-pane>