title: MEAN Stack - ng-click inside of ng-repeat not working with database
body: <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> //app.js
  
   var blogApp = angular.module('BlogApp', []);  //angular module setup, matches ng-app from index.html
   
  
   blogApp.controller('BlogController', function($scope, $http){   //have to add $http if your going to use http (inject the dependancy)
  
    $scope.createPost = createPost;  //grabbing createPost from index.html (binding)
    $scope.deletePost = deletePost;  //map deletePost from index.html
  
    function init(){   //put everything that happens when site first loads in init function, good practice
     getAllPosts();
    }
  
    init();      //call init function to show all database posts
    
  
  
    function getAllPosts(){       //retrieve latest blogposts
  
     $http.get("/api/blogpost").success(function (posts){  //if its successfull, send posts back to client
  
      $scope.posts = posts; //send back to client using $scope
  
     });
  
    }
  
  
    function createPost(post){    //taking post object from ng-model in index.html
  
     console.log(post);           //displaying post information in console log on html site
     $http.post("/api/blogpost", post).success(getAllPosts);  //push 'post' data to api/blogpost url, also call function getAllPosts when posting new post
     console.log(postId);
    }
  
    function deletePost(postId){    //deletePost is the same name as in index file for ng-click
      console.log(postId);
      $http.delete("/api/blogpost/"+postId).success(getAllPosts);   //delete just one post with specific id, without + postId it would delete all posts
  
  
    }
  
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="BlogApp"&gt;
  &lt;head&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
    
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container" ng-controller="BlogController"&gt;
  &lt;h1&gt;Blog&lt;/h1&gt; 
  
  &lt;input ng-model="post.title" class="form-control" placeholder="title"/&gt;
  &lt;textarea ng-model="post.body" class="form-control" placeholder="body"&gt;&lt;/textarea/&gt;
  &lt;button ng-click="createPost(post)" class="btn btn-primary btn-block"&gt;Post&lt;/button&gt;
  
  
  &lt;div ng-repeat="post in posts"&gt;
  &lt;h2&gt;
   {{post.title}}
   &lt;a ng-click="deletPost(post._id)" class="pull-right"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/h2&gt;
  &lt;em&gt;{{post.posted}}&lt;/em&gt;
  &lt;p&gt;
   {{post.body}}
  &lt;/p&gt;
  &lt;/div&gt;
  
   {{posts}} 
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For some reason, my ng-click button is not calling my deletePost() function.  Been trying to figure this out for hours have no idea why it is not working.  Get absolutely no response when clicking the glyphicon.  Tried button as well still no response.  Anybody see what I am doing wrong?</p>