[SOLVED] Angular JS Error: [$injector:modulerr]

Angular JS Error: [$injector:modulerr]

Edit: Now that I have actually worked using angularjs, I do not recommend anyone do what I was trying to accomplish.

This is my first Angularjs application so I am a nooby, and still trying to figure things out. But I am receiving an error in my chrome console that says this:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.1/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.1%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...1) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:6
(anonymous function) angular.min.js?1394393789:30
r angular.min.js?1394393789:7
e angular.min.js?1394393789:29
cc angular.min.js?1394393789:32
c angular.min.js?1394393789:17
bc angular.min.js?1394393789:18
cd angular.min.js?1394393789:17
(anonymous function) angular.min.js?1394393789:208
l jquery-2.0.3.js:2913
c.fireWith jquery-2.0.3.js:3025
x.extend.ready jquery-2.0.3.js:398
S

Which sends me to this page: http://docs.angularjs.org/error/$injector/modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.0-beta.1%2F$injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E

I am not porting any application over from a 1.2 and under. I followed the documentation for some simple code below..

This is the angular doc this code is based off of: http://docs.angularjs.org/tutorial/step_02

What is shown in the browser is the header tag with {{split.description}}. Any thoughts?

My HTML

<html lang="en" ng-app="app">
    <head>
        <!-- My CSS Here -->
    </head>

    <body>
        <div ng-controller="SplitController">
            <div ng-repeat="split in splits">
                <h4>{{split.description}}</h4>
            </div>
        </div>
    </body>

</html>

My JavaScript

var Split = function(data)
{
    this.description = data['description'];
}

function getSplits(parentid) {
    var url = "/transaction/split/get";
    var ajax = $.ajax({
        type: 'GET',
        dataType: 'json',
        url: url,
        data: {
            parentid: parentid
        },
        beforeSend: function(data){
        },
        success: function(data){
            data = JSON.parse(data, true);
            var splits = [];
            for(var i = 0; i < splits.length; i++)
            {
                splits.push(new Split(splits[i]));
                console.log(splits[i]);
            }
            var app = angular.module("app", []);
            app.controller('SplitController', function($scope){
                $scope.splits = splits;
            });
        },
        error: function(data){
            //$('body').html(JSON.stringify(data));
        }
    }).done(function(data){
        });
}

$(document.ready(function(){
    getSplits(1);
});

Solution

I really wouldn't suggest doing this, for reasons that others already stated, but you can always get a handle to the angular $scope of a given element in some jquery handler. Just define your controller as anybody normally would (in the body of a script).

success: function(data){
  ... //splits and whatnot
  var $scope = angular.element($("div[ng-controller='SplitController']")).scope()
  $scope.$apply(function(){
    $scope.splits = splits;
  })
}

You can't define a controller like you're doing because ng-app is going to run on document.ready. It will be looking for the controller you specified with ng-controller which has yet to be defined. It's perfectly okay for you to define a SplitController that doesn't initialize 'splits' or any data, because ng-repeat will be watching for changes to 'splits' and will keep the DOM up to date.