Running MEAN stack, problems with angular inline templates



I’m attempting to run a web app on c9 with MEAN stack and I’m following a tutorial online. I’ve installed node and mongo into the Workspace (though I’m not using them yet). My page displays blank and i an error from the chrome developer console: Uncaught Error: [$injector:modulerr]$injector/modulerr?p0=flapperNews&… Anyone know whats going on here? Is it a problem with my angular links? I’ve tried ones straight off the tutorial ( ) and ones off the cdnjs.cloudflare website, and the googleapis ones.
My workspace should you want to see it:
My directory:

index.html code:
`<!doctype html>

Flapper News .glyphicon-thumbs-up {cursor:pointer}

app.js code:

`var app = angular.module('flapperNews', ["ui.router"]);
    var o = {
        posts: []
    return o;

app.config([ '$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

    .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'MainCtrl'
    .state('posts', {
        url: '/posts/{id}',
        templateUrl: '/posts.html',
        controller: 'PostsCtrl'

app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
    $scope.posts = posts.posts;
    $scope.posts = [
        {title: 'post 1', upvotes: 12},
        {title: 'post 2', upvotes: 14},
        {title: 'post 3', upvotes: 16},
        {title: 'post 4', upvotes: 11},
        {title: 'post 5', upvotes: 1}
    $scope.addPost = function(){
        if (!$scope.title || $scope.title === '') {return;}
            title: $scope.title, 
            link: $,
            upvotes: 0,
            comments: [
                {author: 'Joe', body: 'Cool post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
        $scope.title = '';
        $ = '';
    $scope.incrementUpvotes = function(post){
        post.upvotes += 1;

app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
    function($scope, $stateParams, posts){
        $ = posts.posts[$];

    $scope.addComment = function(){
        if($scope.body === '') { return; }
            body: $scope.body,
            author: 'user',
            upvotes: 0
        $scope.body = '';


This code runs on plunker: , as provided by someone on my stack overflow post here: . I’m guessing this is cloud9 issue because my code runs and is not producing syntax errors.

Can anyone provide any help?


I just looked at your application preview now and it seems it’s working correctly. Did you change something?


Yeah was just about to post here. Apparently all my injected JS and bootstrap needed to be https.


Ah yep that makes sense. You can also just use // instead of http:// or https:// and your browser will auto detect which one it should use. (see for more information)