Have you debugged your controller. Everything above the controller looks fine and you are using $scope which is good :). Charlie

I wonder if it's something around your call to $http.get in your totalTimeResource?  You are returning the result directly rather than using the success callback.

See here for documentation on angular's $http.get.

I'm not sufficiently expert in angular to give a definitive answer but basically as I understand you are getting the promise back to your controller and not the retrieved value.  Instead I think you need to look at something like this, to resolve the promise in your controller:

totalTimeResource.GetAttendeeTotalTime($scope.nodeId).then(function(data) {
    $scope.totalTime = data;
});

Hope that's of use.

Andy

I have updated the code, but I am still getting the same issue. See the pictures below for the proof. It is fascinating. In the Google dev group, there was a suggestion to use a custom resolver, but I haven't been able to find much information about how to tap into that.

Here's the updated controller:

angular.module("umbraco").controller("ComputeAttendeeTotalTimeController", function($scope, totalTimeResource, $routeParams){
    $scope.nodeId = $routeParams.id;
    totalTimeResource.GetAttendeeTotalTime($routeParams.id).then(function (response) {
        $scope.totalTime = response.data;
    });
    //$scope.totalTime = totalTimeResource.GetAttendeeTotalTime($scope.nodeId);
    // get current time and compute difference.
});

And the service:

angular.module("umbraco.resources").factory("totalTimeResource", function ($q, $http) {
    return {
        //this cals the Api Controller we setup earlier
        GetAttendeeTotalTime: function (nodeId) {
            return $http.get("/api/Content/GetAttendeeTotalTime?nodeId=" + nodeId);
        }
    };
});

And the manifest:

{   
    propertyEditors: [      
        {
            alias: ".ComputeAttendeeTotalTime",
            name: "Compute Attendee Total Time",
            editor: {
                view: "/App_Plugins/ComputeAttendeeTotalTime/ComputeAttendeeTotalTime.editor.html",
                valueType: "JSON"
            },
            defaultConfig: {
            },
            prevalues: {
                fields: [
                ]
            }
        }
    ],
    javascript: [
        '/App_Plugins/ComputeAttendeeTotalTime/ComputeAttendeeTotalTime.editorcontroller.js',
        '/App_Plugins/ComputeAttendeeTotalTime/ComputeAttendeeTotalTime.resource.js'
    ],
    css: [
    ]
}

And the view:

<div ng-controller="ComputeAttendeeTotalTimeController">
    <h4>{{totalTime.data}}</h4>
</div>

And the API controller method:

    [HttpGet]
    [Route("GetAttendeeTotalTime")]
    [ActionName("GetAttendeeTotalTime")]
    public int GetAttendeeTotalTime([FromUri] string nodeId)
    {
        var nodeIdInt = int.Parse(nodeId);
        Models.Content attendeeNode = this.contentFactory.GetSingleContent(nodeIdInt, true);
        var attendedDateTime = attendeeNode.Properties.FirstOrDefault(prop => prop.Key == "attendedDateTime");
        if (attendedDateTime.Value == null)
        {
            throw new NullReferenceException("attendedDateTime cannot be null");
        }
        var attendedTimeStr = attendedDateTime.Value.ToString();
        var convertedAttendedDateTime = DateTime.Parse(attendedTimeStr);
        //DateTime currentDate = DateTime.UtcNow; // For some reason, the backend storage is not UTC.
        DateTime currentDate = DateTime.Now;
        TimeSpan span = currentDate - convertedAttendedDateTime;
        var roundedSpan = Convert.ToInt32(Math.Round(span.TotalMinutes));

        return roundedSpan;
    }

We can see that the property is null from the API controller:

But interestingly, the property is clearly there in the management interface:

Do we have any ideas regarding how to access this value from the API controller? If anyone has an idea of how to create a custom resolver, that would be much appreciated.

-Devin

is working on a reply...