Angular JS ng-bind-html filter

Angular JS ng-bind-html filter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.js"></script>
<ul ng-app="myTestNgApp" ng-controller="myMainTestCtrl">
  <li ng-bind-html="longText | textShortenerFilter:10"></li>
  <li ng-bind-html="longText | textShortenerFilter:10"></li>
  <li ng-bind-html="longText | textShortenerFilter:10"></li>
<ul/>

JavaScript

var app = angular.module('myTestNgApp', ['ngSanitize']);

app.controller('myMainTestCtrl', function($scope) {
  $scope.longText = "<style type="text/css">td {border: 1px solid #ccc;}</style>";
}).filter('textShortenerFilter', function() {
  return function(text, length) {
    if (text.length > length) {
      return text.substr(0, length) + "...";
    }
    return text;
  }
});