search feed using apiNG Social Wall / Advanced usage demo (AngularJS directive)

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>apiNG Advanced Demo</title>

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

    <!-- apiNG -->
    <script src="//cdn.jsdelivr.net/aping/latest/aping.min.js"></script>

    <!-- apiNG config for api keys (only for plugins, that needs api keys) -->
    <script src="aping-config.js"></script>

    <!-- apiNG plugins -->
    <script src="//cdn.jsdelivr.net/aping.plugin-flickr/latest/aping-plugin-flickr.min.js"></script>
    <script src="//cdn.jsdelivr.net/aping.plugin-dailymotion/latest/aping-plugin-dailymotion.min.js"></script>
    <script src="//cdn.jsdelivr.net/aping.plugin-rss/latest/aping-plugin-rss.min.js"></script>
    <script src="//cdn.jsdelivr.net/aping.plugin-wikipedia/latest/aping-plugin-wikipedia.min.js"></script>

    <!-- apiNG design -->
    <script src="aping-design-default.js"></script>
    <link rel="stylesheet" href="aping-design-default.css">

    <!-- apiNG design dependencies -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.min.js"></script>
    <script src="//cdn.jsdelivr.net/angular.masonry-packed/0.14.5/angular-masonry-packed.min.js"></script>
    <script src="//cdn.jsdelivr.net/angular.linkify/1.2.0/angular-linkify.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-moment/0.10.3/angular-moment.min.js"></script>

    <!-- angular module -->
    <script src="app.js"></script>

    <link href='//fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>

</head>

<body ng-app="app" style="background-color:#fed;">

    <div class="container" ng-controller="apingDefaultDesignController">
        <br>
        
        <!-- apiNG: http://johnnythetank.github.io/apiNG/ -->
        <!-- configure flickr: https://github.com/JohnnyTheTank/apiNG-plugin-flickr -->
        <!-- configure dailymotion: https://github.com/JohnnyTheTank/apiNG-plugin-dailymotion -->
        <!-- configure rss: https://github.com/JohnnyTheTank/apiNG-plugin-rss -->
        <!-- configure wikipedia: https://github.com/JohnnyTheTank/apiNG-plugin-wikipedia -->
        <!-- add more plugins: https://aping.readme.io/docs/all-plugins -->
        <input type="text" placeholder="search" ng-model="searchFeed">
        <!--<input type="number" step="5" placeholder="items" ng-model="searchItem">-->
        <button ng-click="updateFeed()">search</button>
        
        <aping
            template-url="social_template.html"
            items="5"
            model="social"
            order-by="timestamp"
            order-reverse="true"
            aping-wikipedia="{{wikipediaFeed}}"
            aping-flickr="{{flickrFeed}}"
            aping-dailymotion="{{dialymotionFeed}}"
            aping-rss="{{rssFeed}}">
        </aping>
    

    </div>

</body>

</html>

var app = angular.module('app', ['jtt_aping', 'jtt_aping_flickr', 'jtt_aping_dailymotion', 'jtt_aping_rss', 'jtt_aping_wikipedia', 'jtt_aping_design_default']);

<div class="aping-design-default aping-design-default-social">
    <strong>Advanced Demo Social Wall</strong>
    <br><br>
    <div ng-controller="apingDefaultDesignController">
        <div data-images-loaded masonry class="row" preserve-order reload-on-show ng-show="results">
            <div class="masonry-brick col-lg-4 col-sm-6 col-xs-12" ng-repeat="item in results" ng-cloak>
                <div class="box">
                    <div class="box-header" ng-if="item.img_url">
                        <a ng-href="{{::item.post_url}}" target="_blank" class="aping-picture-link"><img ng-src="{{::item.img_url}}" class="main-image img-responsive" alt=""></a>
                    </div>
                    <div class="box-content">
                        <h4 class="" ng-if="item.caption">{{::item.caption}}</h4>

                        <div class="" ng-if="item.text" linkify>
                            {{::item.text | limitTo: 250}}{{::item.text.length > 250 ? '...' : ''}}
                        </div>

                        <div class="clearfix">
                            <br>
                        </div>

                        <div class="box-footer text-muted">
                            <div class="pull-left text-left">
                                <div ng-if="item.blog_name">
                                    <a href="{{::item.blog_link}}" target="_blank">{{::item.blog_name}}</a>
                                </div>
                                <div am-time-ago="{{::item.timestamp}}"></div>
                            </div>
                            <div class="pull-right">
                                <a ng-href="{{::item.post_url}}" target="_blank" class="platform-link">
                                    ({{::item.platform}})
                                </a>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

"use strict";

angular.module('jtt_aping')
  .config(['$provide', function($provide) {

    $provide.value("apingDefaultSettings", {
        apingApiKeys: {
            //add here your api keys
            //https://aping.readme.io/docs/configuration
        }
    });

}]);

"use strict";

angular.module('jtt_aping_design_default', ['wu.masonry', 'linkify', 'angularMoment', 'ngSanitize'])
  .run(['amMoment', function(amMoment) {
    amMoment.changeLocale('en');
  }])
  .controller('apingDefaultDesignController', ['$scope', '$sce', wikipediaFactory, flickrFactory, function($scope, $sce, wikipediaFactory, flickrFactory) {

    // feed search config
    $scope.facebookFeed = [{}];
    $scope.twitterFeed = [{}];
    $scope.flickrFeed = [{
      'tags': 'lion,eagle,tiger,jaguar,leopard',
      'tagmode': 'any'
    }];
    $scope.wikipediaFeed = [{
      'search': 'sports',
      'items': 9
    }, {
      'title': 'FC Bayern Munich'
    }];
    $scope.dialymotionFeed = [{
      'userId': 'FailArmy',
      'items': 4,
      'search': '2015'
    }, {
      'search': 'Louis C K',
      'language': 'en',
      'items': 8
    }];
    $scope.rssFeed = [{
      'path': 'http://blog.hackerearth.com/feed'
    }, {
      'path': 'http://activeadventures.com/blog/feed/'
    }, {
      'path': 'http://www.sk-gaming.com/rss/'
    }];

    // feed search functionality
    $scope.searchFeed = [];
    $scope.searchItem = [];
    $scope.updateFeed = function(value) {
      $scope.searchFeed = value;
    };
    
    // rss settings
    $scope.addNewRSS = function(url) {
      $scope.feedConfig.rss.push({
        'path': url
      });
    };

    $scope.$on('apiNG.resultMerged', function() {
      //do anything on resultMerged event
    });

    $scope.refresh = function() {
      $scope.$broadcast("masonry.reload");
    };

    $scope.$on('imagesLoaded.SUCCESS', function() {
      $scope.refresh();
    });
    $scope.$on('imagesLoaded.ALWAYS', function() {
      $scope.refresh();
    });

    $scope.getUrl = function(url) {
      if (url) {
        return $sce.trustAsResourceUrl(url);
      }
    };

    $scope.getHtml = function(string) {
      if (string) {
        return $sce.trustAsHtml(string);
      }
    };

  }]);

.aping-design-default .masonry-brick .box {
  background-color: white;
  font-family: 'Economica', sans-serif;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  margin-bottom: 2rem;
}
.aping-design-default .masonry-brick .box:hover {
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
}
.aping-design-default .masonry-brick .box a.aping-picture-link {
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
.aping-design-default .masonry-brick .box a.aping-picture-link:hover {
  opacity: 1;
  -webkit-filter: grayscale(0.5) sepia(0.6);
  filter: grayscale(0.5) sepia(0.6);
}
.aping-design-default .masonry-brick .box img.main-image {
  border-radius: 0;
  width: 100%;
  height: auto;
}
.aping-design-default .masonry-brick .box .box-content {
  padding: 1rem;
  overflow: hidden;
}
.aping-design-default .masonry-brick .box .box-footer {
  height: 1em;
}
.aping-design-default .masonry-brick .box .box-footer .platform-box {
  margin-left: 10px;
  margin-top: 10px;
}
.aping-design-default .masonry-brick .box .box-footer .platform-box a.platform-link {
  display: inline-block;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  border-radius: 40px;
}
.aping-design-default .masonry-brick .box .box-footer .platform-box a.platform-link:hover {
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
}