AngularJS boostrap dropdownmenu linked to input field keypress for autocomplete - angularjs

Question

I am a beginner to angulajs. I am trying to write this code that would display google search suggestions for a search field when i am typing in letters of my search text.
This is how I have done this inside the boostrap 3 navbar:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="col-sm-4 col-md-4 pull-right dropdown" ng-controller="SearchCtrl">
<div class="navbar-form input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="dropdownMenu1" ng-model="text" ng-keyup="suggest()" data-toggle="dropdown">
<div class="input-group-btn">
<button class="btn btn-success" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="result in results">{{result}}</li>
</ul>
</div>
</div>
</div>
</div>
And correspondingly the AngularJS code:
app.controller('SearchCtrl', function ($scope, $http) {
$scope.suggest = function() {
var url = "http://google.com/complete/search?callback=JSON_CALLBACK&output=firefox&q=" + $scope.text;
$http.jsonp(url).success(function(data) {
$scope.results = data[1];
});
};
});
But for some reason the dropdown of suggestion is not showing up.
I monitor in debug console and see that request goes through just fine returning the suggestions, so no javascript error.
Any suggestion if how to make this work as it should (in both, bootstrap and angularjs) is appreciated.
Cheers :))
P.S. In debug I see the dropdown is created and populated just fine when I type "welcome" word: