ng-repeat not displaying data or repeating in Angular - html

Question

I am new to Angular and I am trying to build a search page, I have a button that executes a function to get data from the server when it is clicked. The data is returned to the client, now I want to be able to display the data on that same page.
I've tried something but it does not show. What am I doing wrong?
This is my html:
<div class="search-area col-md-12 no-padding" ng-controller="SearchController as search">
<div class="col-md-3">
<!-- Select Basic -->
<div class="form-group">
<div class="col-md-12">
<select id="From" name="From" ng-model="d.from" class="form-control"
ng-options="item.id as item.dest_name for item in d.destinations">
</select>
</div>
</div>
</div>
<div class="col-md-3">
<!-- Select Basic -->
<div class="form-group">
<div class="col-md-12">
<select id="To" name="To" ng-model="d.to" class="form-control"
ng-options="item.id as item.dest_name for item in d.destinations">
</select>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div class="col-md-12">
<input id="When" name="When" ng-model="d.when" placeholder="When" class="form-control input-md" required="" data-provide="datepicker" data-date-format="mm/dd/yyyy">
</div>
</div>
</div>
<div class="col-md-3">
<a ng-click="getSchedules()" class="submit">Buy Ticket</a>
</div>
</div>
<div class="clear"></div>
<div class="col-md-12" ng-repeat="schedule in d.schedules">
<div class="form-group">
<div class="col-md-12" ng-show="schedule.length">
<% schedule.transport_entity %>
</div>
</div>
</div>
search.js
(function() {
var app = angular.module('search', []);
app.controller('SearchController', ['$http', '$scope', function($http, $scope) {
var search = this;
this.destinations = [];
$scope.d = {};
$scope.getSchedules = function() {
$http.get('/trips/schedules?from='+$scope.d.from+'&to='+$scope.d.to+'&when='+$scope.d.when).success(function(data) {
$scope.d.schedules = data; // Getting The Search Results Here
});
};
$http.get('/trips/destinations').success(function(data) {
$scope.d.destinations = data;
});
}]);
}) ();

Answer 1

Store your data in the $scope rather than in properties of the controller itself. Also you can simplify your logic considerably by making proper use of data binding - if you set an ng-model on the form controls and use ng-options for the select boxes then you don't need any of the jQuery logic to extract values from the fields and generate the option elements - angular will do it all for you.
<div class="search-area col-md-12 no-padding" ng-controller="SearchController as search">
<div class="col-md-3">
<!-- Select Basic -->
<div class="form-group">
<div class="col-md-12">
<select id="From" name="From" ng-model="data.from" class="form-control" ng-options="item.id as item.dest_name for item in data.destinations">
</select>
</div>
</div>
</div>
<div class="col-md-3">
<!-- Select Basic -->
<div class="form-group">
<div class="col-md-12">
<select id="To" name="To" ng-model="data.to" class="form-control" ng-options="item.id as item.dest_name for item in data.destinations">
</select>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div class="col-md-12">
<input id="When" name="When" ng-model="data.when" placeholder="When" class="form-control input-md" required="" data-provide="datepicker" data-date-format="mm/dd/yyyy">
</div>
</div>
</div>
<div class="col-md-3">
<a ng-click="getSchedules()" class="submit">Buy Ticket</a>
</div>
</div>
<div class="clear"></div>
<div class="col-md-12" ng-repeat="schedule in data.schedules">
<div class="form-group">
<div class="col-md-12" ng-show="schedule.length">
<% schedule.transport_entity %>
</div>
</div>
</div>
search.js
(function() {
var app = angular.module('search', []);
app.controller('SearchController', ['$http', '$scope' function($http, $scope) {
$scope.data = {};
$scope.getSchedules = function() {
$http.get('/trips/schedules?from='+$scope.data.from+'&to='+$scope.data.to+'&when='+$scope.data.when)
.success(function(data) {
$scope.data.schedules = data; // Getting The Search Results Here
});
};
$http.get('/trips/destinations').success(function(data) {
$scope.data.destinations = data;
});
}]);
}) ();

Answer 2

You need to add it to the scope.
$scope.search = this;
And when storing the results of the search..
$scope.search.schedules = data;
Then it will be available in the view.