Angular post call with scala,play - angularjs

Question

I want to call angular controller through scala.html file.and angular controller should redirect to scala controller to insert data.
I am getting the list from database through same approach .
but during insert it is not able to call function inside angular controller.
Scala html (interns.scala.html):
#import repository.Interns
#(dataList:play.api.libs.json.JsValue,internForm:Form[Interns])(implicit message:Messages)
#main("List Interns"){
<div ng-app="internApp">
<div ng-controller="InternCtrl">
<table class="table">
<tr>
<th >Id</th>
<th >Name</th>
<th >Email-Id</th>
<th >Mobile No.</th>
<th >Address</th>
<th >Emergency Contact No.</th>
<th></th>
<th><input type="submit" value="Add New Intern" class="btn btn-success" data-toggle="modal" data-target="#addIntern"> </th>
</tr>
<tr ng-repeat="intern in #dataList" class="danger">
<td>{{intern.id}}</td>
<td>{{intern.name}}</td>
<td>{{intern.email}}</td>
<td>{{intern.mobile}}</td>
<td>{{intern.address}}</td>
<td>{{intern.emergency}}</td>
<td> <input type="submit" value="Edit" class="btn btn-primary" data-toggle="modal" data-target="#addIntern"></td>
<td><input type="submit" value="Delete" class="btn btn-danger"> </td>
</tr>
</table>
</div>
</div>
<div ng-app="internApp">
<div ng-controller="AddCtrl">
<div class="modal fade" id="addIntern" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="height:700px;text-align:center;width:500px">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1 class="modal-title">Add Intern</h1>
</div>
<form>
<input type="text" placeholder="Name" class="text" ng-model="name" size="30">
<br>
<br>
<input type="text" placeholder="Email" class="text" ng-model="email" size="30">
<br>
<br>
<input type="text" placeholder="Mobile Number" class="text" ng-model="mobile" size="30">
<br>
<br>
<input type="text" placeholder="Address" class="text" ng-model="address" size="30">
<br>
<br>
<input type="text" placeholder="Emergency Contact" class="text" ng-model="emergency" size="30">
<br>
<br>
<input type="submit" class="btn btn-primary" **ng-click="save()"** value="Add Intern" >
<br><br>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="#routes.Assets.versioned("javascripts/list.js")"></script>
}
Angular controller (list.js):
var internApp = angular.module('internApp', []);
internApp.controller('AddCtrl', function ($scope, $http){
alert("hello")
$scope.save = function(){
var data1 = {"id":8,"name":$scope.name,"email":$scope.email,"mobile":$scope.mobile,"address":$scope.address,"emergency":$scope.emergency};
$http({
method:'POST',
url:'/addNew',
data: JSON.stringify(data1),
contentType: 'application/json',
dataType:'json'
})
}})
internApp.controller('InternCtrl', function ($scope, $http){
$http.get('/list').success(function(data) {
$scope.dataList=data;
});
});

Answer 1

This one works for me without any problems:
https://jsfiddle.net/w3vyak05/2/
As you can see - you see the alert and I added a small part where after submission you see the data underneath the form. Of course in your application you would make the HTTP POST call there.
What is different from your approach:
I am using <form ng-submit="save()"> instead of ng-click. Please be careful when switching - you don't want to end up mixing the two:
Warning: Be careful not to cause "double-submission" by using both the ngClick and ngSubmit handlers together. See the form directive documentation for a detailed discussion of when ngSubmit may be triggered.
What else to keep in mind (sorry, off-topic but had to write it down):
In your code you have this: <input type="submit" class="btn btn-primary" **ng-click="save()"** value="Add Intern" > - I guess you just wanted to draw our attention to the ng-click but do not forget to remove the asterisks.
Your list is populated because this is the only "action" which is executed once the Angular controller has been loaded (just wanted to explain why the one controller is working and the other not).
You are using different syntax for making an HTTP POST and GET requests - try to stick to just one variant. Your future you will thank you :)