angularjs - MEAN with Jade template form submit GET instead of POST -

so, earlier today had working form post , delete restaurants documents mongodb collection. working fine, decided try , load form div instead of redirect new page. doing produced different result when tried submit restaurant form. call $scope.add() in restaurantscontroller, sending get request form data /restaurants instead of post /api/restaurants. i'm looking insight did change behavior. although loading form when click on restaurant anchor tag, not loading restaurants database.

here jade , js menu anchors:

menu.js

app.controller("menu", ["$scope", "$http", function ($scope, $http) {     $scope.home = function () {       $("#content").html("");     };     $scope.restaurants = function () {       $http.get('/restaurants').         success(function(data, status, headers, config){           $("#main_content").html(data);       }).         error(function(data, status, headers, config){        });     }; }]); 

nav.jade

mixin link(name, fn)   li     a.btn(ng-click=fn)= name  nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation')   .container      .navbar-header       button.navbar-toggle.collapsed(type='button', data-    toggle='collapse', data-target='#navbar', aria-expanded='false', aria-    controls='navbar')         span.sr-only toggle navigation         span.icon-bar         span.icon-bar         span.icon-bar       a.navbar-brand(href='/') food app     #navbar.navbar-collapse.collapse       ul.nav.navbar-nav(ng-controller="menu")         +link("home", "home()")         +link("restaurants", "restaurants()") 

and here form:

form(name="newrestaurant" ng-submit="$event.preventdefault();add()")          .row       .form-group         input.form-control(type="text", name="name" placeholder="name", ng-model="name" required)     .row       .form-group         input.form-control(type="text", name="address" placeholder="address", ng-model="address" required)     .row       .form-group.col-md-6         -for(var = 0; <= 5; i++){           input(name="rating" type="radio", value=i, ng-model="rating" required)         =i         -}       .form-group.col-md-6         button.success(type="submit") submit 

and controller...

app.controller("restaurants", ["$scope", "$resource", function ($scope, $resource) {     var restaurant = $resource('/api/restaurants/:id');      var clearform = function () {       $scope.name = '';       $scope.address = '';       $scope.rating = null;     }     clearform();      var validrestaurant = function () {       if($scope.name !== '' && $scope.address !== '' && $scope.rating !== null)         return true;       else{         toastr.error("please fill in required form fields.");         return false;       }     }      $scope.query = function(){       restaurant.query(function (results) {         $scope.restaurants = results;       });     };      $scope.add = function () {       alert("got here!");       if(validrestaurant()){         var restaurant = new restaurant();         restaurant.name = $scope.name;         restaurant.address = $scope.address;         restaurant.rating = $scope.rating;         alert(restaurant);         restaurant.save(restaurant, function (result) {           $scope.restaurants.push(result);           toastr.success("saved " + $scope.name + ".")           clearform();         });       }     };      $scope.update = function (id) {      };      $scope.remove = function (id) {         console.log(id);         restaurant.delete({id: id}, function (err) {             console.log(err);             $scope.query();         });     };     $scope.query(); }]); 

edit: typing up, wondering, maybe angular doesn't recognize form , doesn't create $scope because gets loaded after page loads...?