Edit on
<div class="container" ng-app="filterApp" ng-controller="filterCtrl">
<div class="col-sm-8 col-sm-offset-2">
  <div class="page-header"><h1>Custom filters in angularJS</h1></div>
    <div class="form-group">
        <label>Image URL</label>
        <input type="text" name="name" class="form-control" ng-model="name">
        <div ng-bind-html="name | ifImage"></div>
    </div>
  </div>
</div>
var app = angular.module('filterApp', ['ngSanitize']);
// Declare filter
  app.filter("ifImage" , function(){
  return function(val){
    // regex to check image extension.
    var find = new RegExp("(.png|.jpg|.jpeg)$");
    var data = val;
    // Return value if true
    if(find.test(val))
      return data ='<img src="'+val+'">';
    else
      return data ="Not a valid image";
   };
 });
app.controller('filterCtrl', function($scope){
 $scope.name='//gravatar.com/avatar/a879d103e7fa5a06b4b8a07f336a111c?s=80.png';
});
Rerun