javascript - ngBindHtml not Rendering Sanitized HTML -

i've got simple angular app, , i'm trying inject html page using ngbindhtml. however, it's not being injected. here's html:

<main id="main" ng-bind-html="oregen | trust"></main> 

and here's angular app:

angular.module('programapp', ['programapp.controllers','programapp.filters','ngsanitize']);  angular.module('programapp.controllers', [])   .controller('programcontroller', ['$scope', '$filter', function($scope, $filter){     $scope.oregen = '<div class="orefunction" ng-click="collectfunction(\'parenthesis\', 1)">test text</div>';     $scope.collectfunction = function(value1, value2){       alert(value1 + value2);     };   }]);  angular.module('programapp.filters', []).filter('trust', ['$sce', function($sce){   return function(text) {     return $sce.trustashtml(text);   }; }]); 

when page loaded, nothing appears inside main element.

here's codepen: http://codepen.io/truescript/pen/mwbvpo?editors=101

you can see div being ngbinded not appear. why this?

you can use directive instead filter. please @ jsfiddle

html:

<div ng-app="myapp" ng-controller="programcontroller">     <dir id="main" content="oregen"></dir> </div> 

js:

angular.module('myapp', []) .controller('programcontroller', ['$scope', '$filter', function ($scope, $filter) {     $scope.oregen = '<dir class="orefunction" ng-click="collectfunction(\'parenthesis\', 1)">test text</dir>';     $scope.collectfunction = function (value1, value2) {         alert(value1 + value2);     }; }]) .directive('dir', function ($compile, $parse) {     return {         restrict: 'e',         link: function (scope, element, attr) {             scope.$watch(attr.content, function () {                 element.html($parse(attr.content)(scope));                 $compile(element.contents())(scope);             }, true);         }     } });