MEAN with Jade template form submit GET instead of POST

So, earlier today I had a work form that could submit and delete documents restaurants

to a mongodb collection. Everything worked fine, but then I decided to try loading the form into a div instead of redirecting to a new page. This gave a different result when I tried to submit a form in a restaurant. Originally it would have called $scope.add()

in mine restaurantsController

, but now it sends a request GET

with form data to /restaurants

instead of POST

to /api/restaurants

. I'm looking for some idea of ​​what I have done to change the behavior. Although it loads the form, when I click on the restaurant anchor tag, it does not load restaurants from the database.

Here is the oil and js for the 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 is the 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 i = 0; i <= 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 all 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: Now when I type this I am wondering if maybe angular does not recognize the form and does not create a $ scope for it because it is loaded after the page has loaded ...?