Ok, hopefully I can articulate this problem. I've been working on this for two days now and still don't see what I'm doing wrong.

I have an asp.net 5 app using angular js. I have my angular app.js defined as such:

var ars;

(function () {


    ars = angular.module("ars", []);

    ars.controller("arsController", ['$scope', function ($scope) {
        $scope.title = "ARS - Web Edition";
        $scope.description = "The Avian Record System (ARS) is a professional web based engine for all of your birding needs.";
    }]);

    ars.controller('observerController', ['$scope', '$log', 'observerService', function ($scope, $log, observerService) {
        var promiseGet = observerService.getObservers();
        promiseGet.then(function(data) {
            $scope.Observers = data.data;
            $log.debug(data.data);
            },
            function(errorPl) {
                $log.error('failure loading observers', errorPl);
              });
    }]);

    ars.service("observerService", ['$http', function ($http) {
        this.getObservers = function () {
            return $http.get('http://localhost:52795/ArsDataService.svc/GetObservers');
        }
    }]);
})();

I next route to the Observers Page in mvc which uses the following directive to kick off the web get...

 <div class="panel-body" >
                            <b>Observers</b> - Here's where you make observers.
                            <p><p><a href="../ManagedData/Observer" style="float:right" ng-click="getObservers" class="btn btn-primary btn-sm">Manage observers »</a></p></p>
                        </div>

If you look at the observercontroller in app.js, I can see the log in developer tools containing the results from the webget.. it is showing me the json:

- <ArrayOfObserver xmlns="http://schemas.datacontract.org/2004/07/ArsBrderWebDataService" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
- <Observer>
  <FK_UserAccount>1</FK_UserAccount> 
  <Name>jbaird</Name> 
  <PK_Observer>1</PK_Observer> 
  <Principal>true</Principal> 
  </Observer>
- <Observer>
  <FK_UserAccount>1</FK_UserAccount> 
  <Name>rbaird</Name> 
  <PK_Observer>2</PK_Observer> 
  <Principal>false</Principal> 
  </Observer>
  </ArrayOfObserver

So I know that the $scope.Observers is getting the right data.

on the Observer.cshtml I have:

@{
    ViewBag.Title = "Observer";
}

<h2>Observer</h2>



<div ng-controller="observerController">
        {{ observers }}
 </div>

However at this time Observers doesn't show in the render. Attached is the screen shot.

Can anyone spot what i'm overlooking?