Receiving the error when the page is loaded. I'm trying to append a new object to an array of entries.

What is wrong with the code?

index.html

Raffler

<div ng-controller="RaffleCtrl">

  <form ng-sumbit="addEntry">
    <input type="text" ng-model="newEntry.name">
    <input type="submit" value="Add">
  </form>

  <ul>
    <li ng-repeat="entry in entries">{{entry.name}}</li>
  </ul>
</div>

raffle.js

angular.module('myApp', []).controller("RaffleCtrl", function ($scope) {
  $scope.entries = [
      {
        name: "Larry"
      }, {
        name: "Curly"
      }, {
        name: "Moe"
      }
    ]
});

$scope.addEntry = function () {
  $scope.entries($scope.newEntry)
  $scope.newEntry = {}
};

Receiving the error when the page is loaded. I'm trying to append a new object to an array of entries.

What is wrong with the code?

index.html

Raffler

<div ng-controller="RaffleCtrl">

  <form ng-sumbit="addEntry">
    <input type="text" ng-model="newEntry.name">
    <input type="submit" value="Add">
  </form>

  <ul>
    <li ng-repeat="entry in entries">{{entry.name}}</li>
  </ul>
</div>

raffle.js

angular.module('myApp', []).controller("RaffleCtrl", function ($scope) {
  $scope.entries = [
      {
        name: "Larry"
      }, {
        name: "Curly"
      }, {
        name: "Moe"
      }
    ]
});

$scope.addEntry = function () {
  $scope.entries($scope.newEntry)
  $scope.newEntry = {}
};

• javascript
• angularjs

• Did you add the references for the jscript before your own scripts? <script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script> <script language="JavaScript" type="text/javascript" src="/js/myscripts"></script> – SWiggels Commented Aug 19, 2015 at 9:32

2 Answers 2

You wrongly used $scope outside the controller. Use the $scope inside the controller

angular.module('myApp', []).controller("RaffleCtrl", function ($scope) {
  $scope.entries = [
      {
        name: "Larry"
      }, {
        name: "Curly"
      }, {
        name: "Moe"
      }
    ];

   $scope.addEntry = function () {
     $scope.entries($scope.newEntry)
     $scope.newEntry = {}
   };
});

if you really want to keep it outside

angular.module('myApp', []).controller("RaffleCtrl", function ($scope) {
  $scope.entries = [
      {
        name: "Larry"
      }, {
        name: "Curly"
      }, {
        name: "Moe"
      }
    ];
  $scope.addEntry = addEntry;
});

function addEntry() {
  $scope.entries($scope.newEntry)
  $scope.newEntry = {}
};