Trying to use controllers in AngularJS - angularjs

Question

I have implemented auto-complete feature, now I am trying to integrate into my main application. This is the controller function which I designed.
(function() {
'use strict';
angular
.module('MyApp')
.controller('DemoCtrl', DemoCtrl);
function DemoCtrl($http) {
this.querySearch = function (query) {
return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
return result.data;
});
}
}
})();
This is my HTML for the first scenario:
<div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak="">
<md-content class="md-padding">
<form name="searchForm" ng-submit="$event.preventDefault()">
<div layout-gt-sm="row">
<md-input-container flex="">
</md-input-container>
<md-autocomplete md-floating-label=""
flex=""
md-item-text="item.Symbol"
md-items="item in ctrl.querySearch(ctrl.searchText)"
md-search-text="ctrl.searchText"
md-selected-item="ctrl.selectedItem"
md-no-cache="ctrl.noCache"
md-input-name="autocompleteField"
required="">
<input>
<md-item-template>
<span md-highlight-text="ctrl.searchText">{{item.Symbol+" - "+item.Name+" ("+item.Exchange+")"}}</span>
</md-item-template>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">You <b>must</b> have a favorite movie.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
</input>
</div>
</form>
</md-content>
</div>
Now the application currently contains controller in this format:
var app = angular.module("assign8", ["ngAnimate"]);
app.controller("MyCtrl", function ($scope) {
$scope.myValue=false;
$scope.myValue_sec = false;
});
I am very new to angular, I am unable to map the first format to the second one. Kindly let me know how can I map first to second. TIA.

Answer 1

I'm not sure where the confusion lies. The two scenarios are very similar.
app.controller("MyCtrl", function ($scope) {
this.querySearch = function (query) { ... }
});

Answer 2

There are two manners to make the binding in AngularJS.
The controller as that is what is done in the first format, you can see DemoCtrl as ctrl in html the ctrl variable represent your controller, in your controller, you see this, every attribut of this can be accessed via ctrl in html. for example: ctrl.myAttribut.
The second manner is the use of $scope service. that is what is done in the second format. every attribut of $scope can be accessed in html as long as the corresponding controller is called. For example: if in your controller you have $scope.myAttribut, in your html you can access like this {{myAttribut}}.

Answer 3

This worked:
<script>
var app = angular.module("MyApp");
app.controller("DemoCtrl", function ($http) {
this.querySearch = function (query)
{
return $http.get('http://127.0.0.1:8888/autocomplete/' + escape(query)).then(function(result) {
return result.data;
});
}
});
</script>