view not updating in AngularJS after $http.get - angularjs

Question

After getting values from REST-API $scope is not updating view
here is my HTML
<div ng-repeat="s in services1">
<label class="checkbox-inline">
<input type="checkbox" id="{{s.Id}}" name="{{s.Id}}" ng-model="s.IsChecked">
{{s.Name}}</label>
<br/>
</div>
AngularJS Controller
var addMember = [
'$scope', '$http', function ($scope, $http) {
$scope.member = [];
$scope.services1 = [];
var bid = "";
//onclick function
$scope.setId = function(id) {
$("#processing-modal").modal('show');
$http.get('/api/Servicesapi/ServicesByBusiness/' + id)
.then(function (response) {
$scope.services1 = response.data;
$("#processing-modal").modal('hide');
$("#anm").modal('show');
console.log($scope.services1); //this is printing values
},
function() {
alert("Error in getting services of this Employee");
});
console.log($scope.services1); //this prints empty array
};
}
];
first console.log() prints array with values but the other one outside $http.get function prints empty braces and view is not updating
UPDATE
FULL HTML VIEW
<div ng-controller="addMember">
<div class="savebar"><button type="submit" class="btn btn-warning" value="Save"
id="anmbutton" ng-click="setId('#ViewBag.bid');">Add New Members</button>
</div>
</div>
<!--Add new Members Modal -->
<div ng-controller="addMember">
<div class="modal fade" id="anm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width: 790px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Team Member</h4>
</div>
<div class="modal-body">
<div style="float: left">
<div style="float: left">
<div class="container" style="border-right: 1px solid gray; margin-left: -20px; margin-top: -12px; width: 440px;">
<!-- Profile Picture -->#*<br/>*#
<div style="border: 1px solid; float: left; height: 100px; width: 100px;">
<img src="" />
<a class="badge" href="#">Add Picture</a>
</div>
<div style="float: left; height: 100px; margin-left: 20px; width: 200px;">
<br/><br/><br/><br/><br/>
<input class = "form-control" style = "margin-top: -100px; width: 250px" type="text" value="" id="membername" ng-model="member.Name"/>
<input type="checkbox" class="checkbox" id="provideservice" name="provideservice" value="true"/> Provide Services<br/>
<input type="checkbox" class="checkbox" id="SearchedByName" name="SearchedByName" value="true" ng-model="member.SearchedByName"/> Allow Selected by Name
<hr/>
</div>
</div>
<div style="border-right: 1px solid grey; margin-top: -11px; width: 420px;">
<div style="margin-left: 112px; margin-top: 10px; width: 200px;">
<label>Pricing Level</label>
<input class="form-control" type="text" id="pricinglevel" name="pricinglevel"/>
<label>Job Title</label>
<input class="form-control" type="text" id="JobTitle" name="JobTitle" value="" ng-model="member.JobTitle"/>
<label>Phone</label>
<input class="form-control" type="text" id="Phone" name="Phone" value="" ng-model="member.Phone"/>
<label>Gender</label>
<br/>
<label class="checkbox-inline">
<input type="radio" id="Gender" name="Gender" value="Male" ng-model="member.Gender"> Male
</label>
<label class="checkbox-inline">
<input type="radio" id="Gender" name="Gender" value="Female" ng-model="member.Gender"> Female
</label>
<label>Email</label>
<input class="form-control" type="text" id="Email" name="Email" value="" ng-model="member.Email"/>
<label class="checkbox-inline">
<input type="checkbox" id="CanLogin" name="CanLogin" ng-model="member.CanLogin"> Login to Dashboard
</label>
<br/>
<label>about</label>
<textarea class="form-control" name="About" ng-model="member.About" ></textarea>
</div>
</div>
</div>
<div style="float: right; /*padding-right: 20px;*/margin-right: -345px; margin-top: -16px; width: 340px;">
<label>What services can be booked for this employee online?</label>
<br/>
<div ng-repeat="s in services1">
<label class="checkbox-inline">
<input type="checkbox" id="{{s.Id}}" name="{{s.Id}}" ng-model="s.IsChecked"> {{s.Name}}
</label>
<br/>
</div>
<pre>$scope.services1 {{services1 | json}}</pre>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="addNew()" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

UPDATE:
I reproduced two controllers declarations with same name.
<div ng-controller="addMember">
<button ng-click="setId()">SDFS</button>
</div>
<div ng-controller="addMember">
<p ng-repeat="s in services">{{s}}</p>
</div>
ng-repeat doesn't work in second controller declaration. If I move <p ng-repeat="s in services">{{s}}</p> to top controller, it works. Do not declare two controllers with one name :)
END
console.log($scope.services1); //this prints empty array
This is because $http.get() promise is not resolved yet.
Try this code
var addMember = [
'$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.member = [];
$scope.services1 = [];
var bid = "";
//onclick function
$scope.setId = function(id) {
$("#processing-modal").modal('show');
$http.get('/api/Servicesapi/ServicesByBusiness/' + id)
.then(function (response) {
$timeout(function(){
$scope.services1 = response.data;
});
$("#processing-modal").modal('hide');
$("#anm").modal('show');
console.log($scope.services1); //this is printing values
},
function() {
alert("Error in getting services of this Employee");
});
console.log($scope.services1); //this prints empty array
};
}
];
Or call $scope.$apply() after $scope.services1 = response.data;
$scope.services1 = response.data;
$scope.$apply()