//app.js
var blogApp = angular.module('BlogApp', []);
blogApp.controller('BlogController', function($scope, $http){
$scope.createPost = createPost;
$scope.deletePost = deletePost;
function init(){
getAllPosts();
}
init();
function getAllPosts(){
$http.get("/api/blogpost").success(function (posts){
$scope.posts = posts;
});
}
function createPost(post){
console.log(post);
$http.post("/api/blogpost", post).success(getAllPosts);
console.log(postId);
}
function deletePost(postId){
console.log(postId);
$http.delete("/api/blogpost/"+postId).success(getAllPosts);
}
});<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea/>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<div ng-repeat="post in posts">
<h2>
{{post.title}}
<a ng-click="deletPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>
{{post.body}}
</p>
</div>
{{posts}}
</div>
</body>
</html>Having issues with my ng-click button not triggering the deletePost() function. Spent hours troubleshooting and still can't figure out why it's not working. No response when clicking the glyphicon or button. Any insights on what I might be missing?