AngularJS Chilipeppr Example Fiddle

This fiddle shows how you can use AngularJS with Chilipeppr to create cool things!

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div class="well">
    <div ng-controller="tgController" id="myPepprHtmlId">
        <div class="form-group">
            <label for="master">Master Firmware Version:</label>
            <h4 id="master">{{firmware.master}}</h4>

            <label for="master">Edge Firmware Version:</label>
            <h4 id="edge">{{firmware.edge}}</h4>
            <h4>Value From Published Message: {{firmware.pubsubvalue}}</h4>
        </div>
        <button type="button" class="btn-primary btn" ng-click="checkForUpdates()">Check Firmware</button>
    </div>
</div>

CSS

#master {
    color:green;
}
#edge {
    color: orange;
}

JavaScript

requirejs.config({
    paths: {
        angularjs: 'http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular',
    },
    shim: {},

});



// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-hellointrojs"], function (myPepprWidget) {
    console.log("Tests running for " + myPepprWidget.id);

    myPepprWidget.init();  //This code calls our main in the cpedefine.  THIS IS NEEDED!
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-hellointrojs", ["chilipeppr_ready", "angularjs"], function (cp) {

    return {
        id: "com-chilipeppr-widget-angularjsExample",
        url: "http://jsfiddle.net/ril3y/7xb2ecmo/show/light/",
        fiddleurl: "http://jsfiddle.net/ril3y/7xb2ecmo/",
        name: "Widget / AngularJS Example",
        desc: "This widget is a template for AngularJS Peppr Apps!",
        publish: {},
        subscribe: {},
        foreignPublish: {},
        foreignSubscribe: {
            '/com-chilipeppr-interface-cnccontroller/firmware': "Listens for firmware build to be published"
        },


        //This is like our Main function.  It starts off the widget.
        init: function () {
            this.angularSetup(); //Setups the controllers and bootstraps the angular app
            chilipeppr.publish("/com-chilipeppr-interface-cnccontroller/firmware", "429.01"); //Publish a fake fimware update
            //To give the subscribe test function a go.

        },
        angularSetup: function () {

            //=======================================================================================================================
            //ANGULAR CODE HERE
            //=======================================================================================================================
            var myPeppr = angular.module('myPeppr', []);


            //Controller
            myPeppr.controller('tgController', ['$scope', '$http', function ($scope, $http)...