angularjs - ng-show not working for dynamically added HTML within my controller -

please see relevant jsfiddle

within code dynamically added in sanitized html code using ng-bind-html when assigning ng-show html not work. tried using $compile far nothing well.

i trying hide , show element using ng-show both visible.

js:

var app = angular.module('app', ['ngsanitize'])  app.controller('myctrl', function($scope, $compile) {    $scope.myhtml = [];      $scope.myhtml.push('<li ng-show = "visible(1)">test1</li>');     $scope.myhtml.push('<li ng-show = "visible(0)>test2</li>');     $scope.visible = function(arg)  {   if (arg == 1) return true;     if (arg == 0) return false;     }    $compile($scope.myhtml)($scope);  }); 

html:

<div ng-app="app">     <div ng-controller="myctrl">         <ul ng-repeat="snippet in myhtml" ng-bind-html="snippet"></ul>     </div> </div> 

your controller should pretty never aware of markup, ever. that's power of mvc. should repeat across real dataset , build markup in view. following, set items = [item1, item2] in controller.

<div ng-app="helloapp">     <div ng-controller="myctrl">         <ul ng-repeat="item in items">            <li ng-show = "test($index)">test{{$index}}</li>         </ul>     </div> </div> 

if need way you're doing, should use custom directive , use angular.element append compiled html current directive element. ng-bind-html doesn't expect compiled node, rather html string.