Create Dynamic View


Hi, I want to build an app which only works with Json Config File.
So, I want to create some button with specific link, but in HTML, not in javascript. (I create element in JS but I print the outerHTML)

But when I put personnal link, the sanitizer (or I don’t know) reset my link, look at code :

My state :

.state('menu.samplesToOrder', {
      url: '/samplesToOrder/{config}',
      views: {
        'side-menu21': {
          templateUrl: 'templates/samplesToOrder.html',
          controller: 'samplesToOrderCtrl'

My link generator in my button : (item is the json config parsed)

  button.setAttribute("href", "#/side-menu/" + item.module + "/" + item.config + "/");
  button.setAttribute("ui-sref", "menu." + item.module + "()");

My HTML View :

<div compile="content" class="htmlComment"></div>

My Compile Directive (from SOF) :

  .directive('compile', ['$compile', function ($compile) {
  return function(scope, element, attrs) {
      function(scope) {
        // watch the 'compile' expression for changes
        return scope.$eval(attrs.compile);
      function(value) {
        // when the 'compile' expression changes
        // assign it into the current DOM

        // compile the new DOM and link it to the current
        // scope.
        // NOTE: we only compile .childNodes so that
        // we don't get into infinite loop compiling ourselves

My Controller (HTML Injection) :

.controller('homeCtrl', ['$scope', '$stateParams', '$sce', 'configFactory',
    function ($scope, $stateParams, $sce, configFactory) {
        .then(function (response) {
          var config =;
          var html = createView(config);
          $scope.content = $sce.trustAsHtml(html);


I want to create link like href="#/side-menu/samplesToOrder/ConfigFileName" but always my HTML delete my href and replace it by href="#/side-menu/samplesToOrder/"

Can you help me ? thank you.

I also tried that (disable sanitization and enable whitelist URL) :