Modify the html with data retrieved by the controller

Question

The controller retrieve data from a request and I have to update the html/input with the data retrieved. Sorry the question is this code doesn't work and I'm not figuring it out.

exports.SearchBarController = function($scope, $http) {
  
  $scope.update = function() {
    var query = encodeURIComponent($scope.searchText);

    $http.
      get('/api/v1/product/text/' + query).
      success(function(data) {
        $scope.results = data.products;
      });
  };

  setTimeout(function() {
    $scope.$emit('SearchBarController');
  }, 0);
};

<div class="search-bar-wrapper">
  <div ng-controller="SearchBarController">
      <input type="text" class="search-bar-input" ng-model="data.products" ng-        change="update()">
        <div class="product" ng-repeat="product in {{data.products}}">
        </div>
  </div>

Answer 1

＆＃13;

＆＃13;

exports.SearchBarController = function($scope, $http) {
  
  $scope.update = function() {
    var query = encodeURIComponent($scope.searchText);

    $http.
      get('/api/v1/product/text/' + query).
      success(function(data) {
        $scope.results = data.products;
      });
  };

  setTimeout(function() {
    $scope.$emit('SearchBarController');
  }, 0);
};

＆＃13;

<div class="search-bar-wrapper">
  <div ng-controller="SearchBarController">
      <input type="text" class="search-bar-input" ng-model="searchText" ng-change="update()">
        <div class="product" ng-repeat="product in results">
        </div>
  </div>

＆＃13;

＆＃13;

＆＃13;