Angular: Controller as syntax when calling the $http service

Plnkr01 Plnkr02

So that all works as expected… but I don’t seem able to use the Controller As syntax. Maybe that is right? Another day.

(Another day…)

Thanks Ignacio. So this is how you have to expose [this], or at least a way to do it:


So digest the [var me = this;] piece, allowing other properties to be exposed. Then in the calling html, we can go back to our preferred [Controller as] syntax:


And a sample of the output:


Final go – this time the controller in index.html is a child of the app myViewer, and inside script.js it’s all in an IIFE:



(function() {

var app = angular.module(“myViewer”,[]);

var MainCtrl = function($http) {

var me = this;

var onUserComplete = function(response) {
me.user =;

me.message= “GitHub Viewer”;


app.controller(“MainCtrl”, [“$http”, MainCtrl]);


<!DOCTYPE html>
<html ng-app=”myViewer”>

<link rel=”stylesheet” href=”style.css”>
<script src=””></script&gt;
<script src=”script.js”></script>

<body ng-controller=”MainCtrl as stuff”>

Name: {{}}

Name: {{stuff.user.type}}
<img ng-src=”{{stuff.user.avatar_url}}” title=”{{}}”>



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s