My Angular App is Broken after Upgrading to the Latest Beta

1 minute read

##Introduction I have been experimenting with AngularJS for a couple of months. After upgrading to 1.3.0-beta.18, I noticed the following code didn’t work. I was previously using the latest stable build which is 1.2.22 as shown below:

####The HTML File

<!DOCTYPE html>
<html ng-app="">

  <!--Works with latest Stable Build-->
  <script src=""></script>

  <!--Does not work with Latest Beta-->
  <!--UNCOMMENT ME! <script src=""></script>-->

  <script src="script.js"></script>

<body ng-controller="MainController">
  <h1>Angular Playground</h1>
  <br />Total Length: 


####The JavaScript File

var MainController = function($scope) {
    $scope.message = "Hello, Michael";

Using 1.2.22, the following is displayed in the browser:

Hello, Michael
Total Length: 14

However, if I use 1.3.0-beta.18, then I get the following error:

Error: [ng:areq] Argument ‘MainController’ is not a function, got undefined

And the page returns the following:

Total Length:

####The Fix After a lot of digging, I found several other had asked this question and it turns out that the answer is that with 1.3.x, you can’t declare a global constructor and use it with ng-controller as I was doing before. You have to create an angular module and add MainController as a controller as shown below:

(function(angular) {

    function MainController($scope) {
        $scope.message = "Hello, Michael";

    angular.module("app", []).controller("MainController", ["$scope", MainController]);


The only modification needed for the HTML page is to add the name of the angular module as shown below (where before I left it blank):

<html ng-app="app">

##Wrap-Up It is kind of a bummer to know that so many breaking changes are introduced in each version of Angular, but maybe that is just the nature of the beast. Anyways, I hope this post helped someone out there that was struggling like I was.


Leave a Comment