Question: When I return from my service call I seem unable to update my view. Why does **'not broken'** never get out putted to the console?

the services returns **[{test: 'service workies'}]**

```
app.controller('foo-controller', ['fooService','$scope', function (fooService,$scope) {
    var ctrl = this;
    ctrl.Results = [{ test: 'no workies' }];
    ctrl.Search = function () {
        fooService.GetFoos().then(function (result) {
            console.log('test');
            console.log(ctrl.Results);
            ctrl.Results = result;
            console.log(ctrl.Results);
            $scope.$apply(function () {
                console.log('not broken');//never fires!!
                ctrl.Results = [{test : 'workies' }]
            });
        });
    };
    return ctrl;
}]);

  app.directive('fooLogo', function () {
        return {
            restrict: 'E',
            templateUrl: './App/Templates/foo.html',
            controller: 'foo-controller',
           controllerAs: 'f'

        };
    });

```

**edit foo service**

```
     .service('fooService', ['$http', function ($http) {

     return $http.get("https://www.googleapis.com/books/v1/volumes?q=harry+potter").then(

function(result){ return [{ test: 'service workies'}]}, 

function(error) { return [{test: 'service call no workies'}] );

```

Answer: 
I see a few issues in your code. I don't see anywhere inside `fooService` where `GetFoos()` is declared, so that's one issue. Try the following:

```
app.controller('MainCtrl', ['$scope', 'BookQueryService',
  function($scope, BookQueryService) {

    $scope.search = function() {
      BookQueryService.getBooks().then(function(data) {
        $scope.books = data.data.items;
      });
    };

    // call immediately for the sake of this example
    $scope.search();
  }
]);

app.service('BookQueryService', ['$http',
  function($http) {
    var service = {};

    service.getBooks = function() {
      return $http.get("https://www.googleapis.com/books/v1/volumes?q=harry+potter");
    };

    return service;
  }
]);

app.directive('myBookList', function() {
  return {
    restrict: 'E',
    templateUrl: 'BookList.html',
    controller: 'MainCtrl'
  }
});

```

With the following html:

```
  <body>
    <my-book-list></my-book-list>
  </body>

```

And the following directive template:

```
<div>
  <ul>
    <li data-ng-repeat="book in books">
      {{book.volumeInfo.title}}
    </li>
  </ul>
</div>

```

Here's a plunker with a working example:
<http://plnkr.co/edit/KJPUWj0ghDi1tyojHNzI?p=preview>
Is anything inside the `fooService.GetFoos().then(function(result){...})` being run? If the code you posted is all there is for `fooService`, then it looks like there is no `.GetFoos` method & therefore nothing inside the following `.then` would get run.

Try adding a `.error` after the original `.then` that is chained onto `fooService.GetFoos`:

```
fooService.GetFoos().then(function (result) {
  // your code
}).error(function (data, status){
  console.log("Error!\t", status);
};

```

This will help you figure out what exactly is going on. Whenever your using any sort of promise, make sure you have a `.catch` or `.error` — they can save you a lot of trouble when debugging. Check out angular's [`$http` documentation](https://docs.angularjs.org/api/ng/service/$http) for more details.

Additionally, it looks like the original call to `$scope.$apply()` is unnecessary. You would only use that if you want to run a function outside of angular, or if you manually want to trigger the digest cycle (if that were the case calling `$scope.$digest()` explicitly would be much more appropriate than `$scope.$apply`.

Check out this [blog post](http://jimhoskins.com/2012/12/17/angularjs-and-apply.html) about when to use `$scope.$apply` and the [`$scope.$apply` documentation page](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply) for more info