Example NG

example.js

import angular from 'angular';
import dxMediaFeed from './media/media_feed.component.js';

export default angular
.module('app', [])
.config(statesConfig)
.name;

function statesConfig($stateProvider) {
  $stateProvider.state('media', {
    url: '/?q',
    template: '<dx-media-feed query="params.q"></dx-media-feed>',
    controller: function ($stateParams) {
      this.q = $stateParams.q;
    },
    controllerAs: 'params'
  })
}

media_feed.component.js

import template from './media_feed.jade';
import './media_feed.less';

class MediaFeedController {
  constructor(mediaRepository) {
    this.mediaRepository = mediaRepository;
    this.feed = null;
  }
  
  search(query) {
    // do some stuff...
    this.mediaRepository.getMediaFeed(query).then((feed) => {
      this.feed = feed;
    });
  }
}

export default function () {
  
  return {
    restrict: 'E',
    template,
    scope: {
      query: '='
    },
    controller: MediaFeedController,
    controllerAs: 'vm',
    link: function (scope, el, attr, ctrl) {
      scope.$watch('query', (q) => {
        ctrl.search(query);
      });
    }
  }
}

media_feed.jade

.media-feed
  .media-feed__item(
    ng-repeat="item in vm.feed"
  ) {{ item.id }}