Why is ng-submit not submitting and updating model

Question

http://plnkr.co/edit/0W4ATi7loAKk94Cnj3lz?p=preview

A simple Angular app, not sure why the ng-submit isn't firing the createMeetup function

HTML

<!-- Meetups View -->
<div ng-controller="meetupsController">
    <h1>There are {{meetupsCount}} meetups</h1> 
    <ul>
        <li ng-repeat="meetup in meetups">
            {{meetup.name}}
        </li>
    </ul>
</div>

<form ng-submit="createMeetup()">
    <input ng-model="meetupName" type="text" placeholder="Meetup name"></input>
    <button type="submit">Add</button>
</form>

Controller

var app = angular.module('meetupsApp', [])

.controller('meetupsController', ['$scope', function($scope) {
    $scope.meetupsCount = 10;

    $scope.meetups = [
        { name: "MEAN SF Developers" },
        { name: "Some other meetup" },
    ]

    $scope.createMeetup = function() {
        console.log('clicked');
        $scope.meetups.push({ name: $scope.meetupName });
        $scope.meetupName = '';
    }
}]);

score 3 · Accepted Answer · answered Feb 18 '15 at 17:20

3

The form element is placed outside of your controller's scope.

<!-- Meetups View -->
<div ng-controller="meetupsController">
    <h1>There are {{meetupsCount}} meetups</h1> 
    <ul>
        <li ng-repeat="meetup in meetups">
            {{meetup.name}}
        </li>
    </ul>
    <form ng-submit="createMeetup()">
           <input ng-model="meetupName" type="text" placeholder="Meetup name"></input>
          <button type="submit">Add</button>
    </form>
</div>

answered Feb 18 '15 at 17:20

Karthik

1,377
6
8

Ah thanks! Was following along a new full-stack tutorial https://www.youtube.com/watch?v=AEE7DY2AYvI I'm used to adding my main controllers to the body tag, and here it was just an isolated div – Leon Gaban Feb 18 '15 at 17:25

Why is ng-submit not submitting and updating model

1 Answers1