ng-repeat does not work when I use it - angularjs

Question

my code as follows:
<ons-template id="stockSearch.html">
<ons-page ng-controller="stockSymbolController">
<ons-toolbar class="DCF">
<div class="left">
<ons-back-button style="color:white;"></ons-back-button>
</div>
<div class="center" style="font-size:22px;" >Stock Search : {{myDCFNavigator.getCurrentPage().options.symbol}}</div>
</ons-toolbar>
<div class="stockSearchList">
<div ng-repeat="stockSearch in stocksSearchList">
<div class="stockSearchOne">
<div class="stockSearchOneComp">{{stockSearch.company}}</div>
<div class="stockSearchOneInfo">Symbol: {{stockSearch.symbol}}| Exchange:{{stockSearch.exchange}} </div>
</div>
</div>
</div>
</ons-page>
and script.js as follows:
module.controller('stockSymbolController', function($scope, $http){
$scope.stocksSearchList = new Object();
var url = "https://www.xxxxx.com/api/public/search_company/"+myDCFNavigator.getCurrentPage().options.symbol;
$.ajax({
type: 'get',
url: url,
success: function(data) {
$scope.stocksSearchList = data;
console.log($scope.stocksSearchList);
},
});
});
but the ng-repeat does not work.when I add the <div ng-repeat="stockSearch in stocksSearchList"> Even in the middle just display "123" , it would not show.
Anybody knows the reason?

Answer 1

Firstly you should use angular's $http service not jQuery's $.ajax method. From the docs:
The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.
So your code should look more like this:
module.controller('stockSymbolController', function($scope, $http){
var url = "https://www.xxxxx.com/api/public/search_company/"+myDCFNavigator.getCurrentPage().options.symbol;
$http.get(url)
.then(function(response) { // success is being deprecated in favour of .then
$scope.stocksSearchList = response.stocksSearchList; // this should be an array that has nested objects that include properties and values for company, symbol and exchange (see note below)
console.log($scope.stocksSearchList);
}, function(error) {
// do something with the error
});
});
I'm assuming response looks like the below with two items in the array:
{
stocksSearchList: [
{
company: 'some company',
symbol: 'some symbol',
exchange: 'some exchange'
},
{
company: 'some other company',
symbol: 'some other symbol',
exchange: 'some other exchange'
}
]
}

Answer 2

Instead of:
$scope.stocksSearchList = new Object();
Try
$scope.stocksSearchList = [];
And make sure this returns a list;