Issue with ng-bind-html

I'm trying to create a website using angular-js .I'm using rest api calls for getting data. I'm using ngSanitize as the data from rest call includes html character. Even if i use ng-bind-html in my view the html tags are not removed .What is the mistake in my code.Can anyone help me

var app = angular.module('app',['ngSanitize','ui.bootstrap']);
app.controller("ctrl",['$scope','$http','$location','$uibModal',function($scope,$http,$location,$uibModal,){
  //here im making my rest api call and saving the data in to $scope.items;
  }]);
  
  
  
<script src=""></script>
<script src=""></script>
<body ng-app="app" ng-controller="ctrl">
  <div class="hov" ng-repeat ="item in items">
  <br/>
  <div>
    <hr class="divider" style="overflow:auto;">
      <ul>
        <li style="font-family: Arial, Helvetica, sans-serif;font-weight:900px;">
          <h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name"></span></h3>
        </li>
        <li>
          <h4>Description: <span ng-bind-html="item.description"></span></h4>
        </li>
      </ul>
    </div>
  </div>
</body>


ANSWERS:


So you want to allow HTML tags or deny them ?

If you want the html to be escaped in the data coming from your server, just use ng-bind. It will replace < with &lt; and > with &gt; thus showing the HTML tags instead of computing them.

If you want to completely remove any HTML tags

Try this filter

filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
);

then in your HTML :

<h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name | htmlToPlaintext"></span></h3>

If you trust the source and want to compute the HTML it send you

You can use this filter

app.filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     });

then in your HTML :

<h3>Name<span style="color:#0899CC;" ng-model="id2" ng-bind-html="item.name | trusted"></span></h3>

And

<h4>Description: <span ng-bind-html="item.description | trusted"></span></h4>

I have the same problem before some time , then i created a filter for this problem, You can use this filter to do sanitize your html code:

app.filter("sanitize", ['$sce', function($sce) {
    return function(htmlCode) {
        return $sce.trustAsHtml(htmlCode);
    }
}]);

in html you can use like this:

<div ng-bind-html="businesses.oldTimings | sanitize"></div>

businesses.oldTimings is $scope variable having description of strings or having strings with html tags , $scope.businesses.oldTimings is the part of particular controller that you are using for that html.

see in the snapshot:

enter image description here

you can use limitHtml filter to do the same:

app.filter('limitHtml', function() {
    return function(text, limit) {
        var changedString = String(text).replace(/<[^>]+>/gm, '  ');
        var length = changedString.length;
        return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString;
    }
});

Then you can add bothe filter in your html like that:

<p class="first-free-para" ng-bind-html="special.description| limitHtml : special.description.length | sanitize">

Hope it will work for you.



 MORE:


 ? Convert HTML in JSON file with Angular
 ? Passing value with Razor Engine one a SPA
 ? Are additional settings required for AngularJS routing to work in asp.net Web Application (Not MVC)?
 ? Bootstrap.navbar + Angular.routeProvider not working also not giving any error in chrome
 ? Angular $location search does not work always
 ? Can we pass two parameters in $routeProvider.when() function in angular js
 ? Angular 1.x/2 Hybrid, karma tests not bootstrapping ng1 app
 ? Node server to intercept all request from angular (http) to java spring backend
 ? Angular change url without executing routeprovider
 ? Angular js - call a route without view