title: ng-click not working , no data posted in mysql
body: <p>I have been trying to learn following through the tutorial "CRUD app with AngularJs, Node js, express js, Bootstrap, EJS, MySQL" by Shiva Adhikari when I realized that I was stuck at part 5 of the tutorial.</p>
  
  <p>My problem</p>
  
  <p>On submitting the form to create a product category, the browser console does nothing.  I'm new, thanks for any help.</p>
  
  <p><strong>app.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>// Module Dependencies ============================================================================
  var express             = require('express'); // call express
  var app                 = express(); // define our app using express
  var routes              = require('./routes');
  var http                = require('http');
  var path                = require('path');
  //var methodOverride      = require('method-override'); // simulate DELETE and PUT (express4)
  
  var bodyParser          = require('body-parser');
  var mysql               = require("mysql");
  //var favicon             = require('serve-favicon');
  //var morgan              = require('morgan');   // log requests to console
  
  
  
  // Environment  =================================================================================
  
  
  app.set('port', process.env.PORT || 3000);
  app.set('view engine', 'ejs');
  app.set('views', path.join(__dirname, 'views'));
  
  app.use(express.static(path.join(__dirname, 'public')));
   
   
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended: true}));
  app.use(express.static(__dirname + '/public'));
  app.use('/bower_components',  express.static(__dirname + '/bower_components'));
  
  
   
  app.get('/', routes.index);
  app.get('/about', routes.about);
  app.get('/contact', routes.contact);
  
  //app.get('/fileUploader', routes.fileUploader);
  
  
  var productCategoryRoute = require('./routes/productCategoryRouteConfig.js');
  //var productRoute = require('./routes/productRouteConfig.js');
  
  
  new productCategoryRoute(app);
  //new productRoute(app);
  
  
  
  
  
  http.createServer(app).listen(app.get('port'), function () {
      console.log('Express server listening on port ' + app.get('port'));
  });
  
  
   </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>createProductCategory.ejs</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;% include index %&gt;  
  &lt;div class="panel panel-info"&gt;
     &lt;div class="panel-heading"&gt;
        &lt;h3 class="panel-title"&gt;  &lt;%=title %&gt;   &lt;/h3&gt;
     &lt;/div&gt;
     &lt;div class="panel-body"&gt;
        &lt;div class="container"
           data-ng-cloak
           data-ng-app="productCategoryModule"
           data-ng-controller="productCategoryController"&gt;
           &lt;form
              class="navbar-form navbar-left" role= "search"
              method = "POST"
              name = "formProductCategory"
              &gt;
              &lt;div class="row"&gt;
                 &lt;div class="form-group"&gt;
                    &lt;label for="productCategory"&gt;  Product Category Name &lt;/label&gt;  
                    &amp;nbsp;&amp;nbsp; 
                    &lt;input type="text"
                       class="form-control"
                       placeholder="Please Enter Product Category"
                       name="productCategory"
                       id="productCategory"
                       ng-model="productCategory.categoryName"
                       style="width:100%"
                       required&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="row"&gt;
                 &lt;div class="form-group"&gt;
                    &lt;label for="productDetails"&gt;  Product Category Details &lt;/label&gt;  
                    &lt;textarea
                       class="form-control"
                       placeholder="Product Category Details"
                       name="productDetails"
                       id="productDetails"
                       rows="5"
                       cols="30"
                       ng-model="productDetails.categoryDetails"
                       style="width:100%"
                       required&gt;&lt;/textarea&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;&amp;nbsp;&lt;/div&gt;
              &lt;div class="row"&gt;
                 &lt;div class="form-group"&gt; &lt;style="padding-left:40%"&gt;
                    &lt;button type="button"&gt;  &lt;class="btn btn-primary"&gt;
                    &lt;ng-click="createProductCategory(productCategory)"&gt;Create Product Category&lt;/button&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/form&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="/bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="../../javascripts/app/productCategory/productCategoryModule.js"&gt;&lt;/script&gt;
  &lt;script src="../../javascripts/app/productCategory/productCategoryService.js"&gt;&lt;/script&gt;
  &lt;script src="../../javascripts/app/productCategory/productCategoryController.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>productCategoryRouteConfig</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function productCategoryRouteConfig(app) { 
  
      this.app = app;
      this.routeTable = [];
      this.init();
  } 
  
  
  // two types of functions add and process, get
  productCategoryRouteConfig.prototype.init = function () { 
  
      var self = this;
      this.addRoutes();
      this.processRoutes();
  };
  
  
  // 1- process routes , depending on get, post, or delete
  productCategoryRouteConfig.prototype.processRoutes = function () { 
      var self = this;
      self.routeTable.forEach(function (route) {
          if (route.requestType == 'get') {
              console.log(route);
              self.app.get(route.requestUrl, route.callbackFunction);}
          else if (route.requestType == 'post') {
              console.log(route);
              self.app.post(route.requestUrl, route.callbackFunction);}
          else if (route.requestType == 'delete') {
              console.log(route);
              self.app.delete(route.requestUrl, route.callbackFunction);}
      });
  };
  
  
  
  // 2- add routes below, 
  productCategoryRouteConfig.prototype.addRoutes = function () {
      var self = this;
      
      //3 - createProductCategory, get req
      self.routeTable.push({
          requestType : 'get',     
          requestUrl : '/createProductCategory',
          callbackFunction : function (request, response) { 
              response.render('createProductCategory', { title : "Create Product Category" });
          }
      });
  
      //4 - createProductCategory, get req
      self.routeTable.push({ 
          requestType : 'post',
          //in vid he has no api here
          requestUrl : '/createProductCategory',
          callbackFunction : function (request, response) {
              var productCategoryDao = require('../server/Dao/productCategoryDao.js');
              console.log(request.body)
              productCategoryDao.productCategoryDao.createProductCategory(request.body, 
                  function (status) { 
                  response.json(status); 
                  console.log(status);
              });
              
          }
      });
  
  
      // 5- add routes, /viewProductCategory, get req
      self.routeTable.push({
          requestType : 'get',     
          requestUrl : '/viewProductCategory',
          callbackFunction : function (request, response) { 
              response.render('viewProductCategory', { title : "View Product Category" });
          }
      });
  
     // 6
      self.routeTable.push({
          
          requestType : 'get',
          requestUrl : '/getAllProductCategory',
          callbackFunction : function (request, response) {
              
              var productCategoryDao = require('../Server/Dao/productCategoryDao.js');
              productCategoryDao.productCategoryDao.getAllProductCategory (
                  function (productCategories) {
                      console.log(productCategories);
                      response.json({ productCategories : productCategories });
              });
              
          }
      });
  
  };
  
  
  
  
  
  module.exports = productCategoryRouteConfig;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>productCategoryController.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//refer to the parent module
  angular.module("productCategoryModule")
  .controller("productCategoryController", productCategoryController);
  
  //dependency injection, a timeout service,  inject the service we need productCategoryService
  productCategoryController.$inject = ['$scope', '$timeout','productCategoryService'];
  
  //constructor
  function productCategoryController($scope, productCategoryService) {
  
    //define it as object, and it will have two properties
    $scope.productCategory = {
  
      categoryName: "",
      categoryDetails :""
  
    };
  
    $scope.createProductCategory = function(productCategory) {
  
     //the ervice has a metod called createProductCategory which we give the product category
     productCategoryService.createProductCategory(productCategory)
     .success(function(data){
  
          // $timeout(function() {}, 3000)
      
       
  
      });
     }
  
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>productCategoryService.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//use same module, but make a factory, module hands data to the service
  angular.module("productCategoryModule")
  .factory("productCategoryService", productCategoryService);
  
  //dependency injection, uses http, ajax service
  productCategoryService.$inject = ['$http'];
  
  
  function productCategoryService($http) {
  
  return {
  
      //our services, first a method to take the categories from the controller
      //the services does things with the data from the controller
      createProductCategory: function(productCategory) {
  
          //post to this route /createProductCategory, here is the gate request
          return $http.post('/createProductCategory',
              //the data we are posting to the url
              {
                  categoryName: productCategoryName,
                  categoryDetails: productCategory.categoryDetails
              }
  
  
          );
  
  
      },
  
      //angular $http route endpoint
  
      getAllProductCategories: function() {
  
          return $http.get('/getAllProductCategory');
      }
  
  
  
  };
  }</code></pre>
  </div>
  </div>
  </p>