Develop Reference

document.getElementById() on a value that is set through a Meteor template

So I've been trying to build a website using Meteor and am quite new with it. I am trying to have javascript that will make use of the values on the page and then create a download from those values. These values differ depending on which page the user is on as the meteor template is loaded with specific information. The way I would think is would work is:
var thing = document.getElementById("tcpout").value;
but when I test this I get "undefined". Now if I don't do .value then do something like
console.log(document.getElementById("tcpout"));
the output in the console is this:
<td id="tcpout"> 50443</td>
where 50443 is the value that I want. Yet I can't seem to figure out how to get that into the javascript. I am using meteor and have tried a few things through meteor's project .js file, but can't seem to figure out how to incorporate dynamic fields into javascript. Essentially I just want to figure out the easiest and best way to work with the mongodb data on the client-side with javascript. Here is the template and the meteor js file.
<template name="profile">
{{#each iotdevice}}
<div class="container" style="margin-top:10px">
<div class="starter-template" align="center">
<h1>{{model}} {{manufacturer}} {{type}}</h1>
<p class="lead"></p>
<table class="table table-bordered">
<thead>
<tr>
<th>Ports</th>
<th>Outgoing</th>
<th>Incoming</th>
</tr>
</thead>
<tbody>
<tr>
<td>TCP</td>
<td id="tcpout"> {{tcpout}}</td>
<td id="tcpin"> {{tcpin}}</td>
</tr>
<tr>
<td>UDP</td>
<td id="udpout"> {{udpout}}</td>
<td id="udpin"> {{udpin}}</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">Domains</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{domains}}</td>
</tr>
</tbody>
</table>
</div>
<h4 align="center">Select Firewall</h4>
<div align="center">
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger" onclick="vyosformshow()">
VyOS
</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger"
onclick="download('test.sh','hello\nworld')">IPTables
</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger">FreePBX</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger" onclick="dthings()">IPFire
</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger">IPCop</button>
</div>
<div id="vyosform" style="display:none">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleInputEmail1">firewall in name</label>
<input class="form-control" id="firein" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">firewall out name</label>
<input class="form-control" type="text" id="fireout" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">rule number</label>
<input class="form-control" id="rulenum" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">device IP address</label>
<input class="form-control" id="ip" placeholder="">
</div>
<div align="center">
<button id="dostuff" class="btn btn-primary" style="margin-bottom:30px">Submit</button>
</div>
</div>
</form>
</div>
</div>
{{/each}}
</template>
JS
if (Meteor.isClient) {
//this code only runs on the client
var directory = Iron.Location.get().path;
var start = directory.lastIndexOf("/");
var stop = directory.search(".html");
var parseddir = directory.slice(start + 1, stop);
var search = directory.slice(start + 1);
var regexsearch = new RegExp(["^", search, "$"].join(""), "i");
console.log(search);
Template.iotprofiler.helpers({
'device': function () {
return DeviceList.find();
}
});
Template.profile.helpers({
'iotdevice': function () {
return DeviceList.find({model: parseddir});
}
});
Template.search.helpers({
'results': function () {
return DeviceList.find({$or: [{model: regexsearch}, {manufacturer: regexsearch}, {type: z}]});
}
});
}

How can load partial view via angularjs ng-view and ng-route directives

I am completely new in Angular.
I want to load two different partial views with singleton controller by using ng-Route and ng-view.But every time when I executed below SpecialFields.cshtml that I got this type of error.
I have searched many times and test a lot of points in stack overflow like this:
angular multiple routes sharing one controller.
But code didn't work properly.
How can i solve this problem and how can I render partial views by ng-view and ng-route?
Thanks in advance
SpecialField.cshtml is:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/App/Patients/SpecialFields/specialFieldController.js"></script>
<script src="~/App/Common/Services/StorageService.js"></script>
<div class="row" style="font-family:BYekan">
<div class="col-md-12">
<div class="portlet light portlet-fit bordered">
<div class="portlet-title">
<div class="caption">
<i class=" fa fa-cog font-green"></i>
<span class="caption-subject font-green bold uppercase">SpecialFields config</span>
</div>
</div>
<div class="portlet-body" ng-app="SpecialFields" ng-controller="SpecialFieldsController">
<div class="row" style="margin:0 1px;direction:rtl">
<div class="col-md-12">
<div class="row panel panel-default">
<div class="panel-body">
<form name="frm" class="form-inline" >
<div class="form-group col-md-6">
<label for="fieldname" class="bold control-label">Field Name</label>
<span class="required">*</span>
<input type="text" name="fieldname" id="fieldname" class="form-control" required ng-model="specialfieldname" />
</div>
<div class="form-group col-md-5 col-md-pull-1" >
<label for="fieldtype" class="bold control-label">Field Type:</label>
<span class="required"> * </span>
<select id="fieldtype" class="form-control" ng-model="specialfieldtype" ng-options="option for option in [Item1,Item2]">
<option value="" class="placeholder" selected disabled>Item1</option>
</select>
<button class="btn btn-primary " type="submit" ng-click="addSpecialfield()">
Add
<span class="fa fa-plus-square-o" style="padding-right:5px;"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<table class="table table-striped table-bordered" id="sfields">
<thead>
<tr>
<th> Index</th>
<th>Field name</th>
<th>Field Type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="specialfield in specialfields">
<td class="col-sm-2">
{{$index+1}}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldname }}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldtype }}
</td>
<td class="col-sm-1">
<a href="#/update" class="btn btn-default">
Edit
<span class="glyphicon glyphicon-check"></span>
</a>
</td>
<td class="col-sm-1">
<a href="#" class="btn btn-danger" ng-click="deleteSpecialfield(specialfield)">
Delete
<span class="fa fa-remove"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
this is specialFieldController.js
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
// Create the AngularJS app
var app = angular.module('SpecialFields', ['common']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'SpecialFieldsController',
templateUrl: '/List.html'
})
.when('/update', {
controller: 'SpecialFieldsController',
templateUrl: '/Update.html'
})
});
// Create the Controller
app.controller('SpecialFieldsController', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
//Read the Sfield List from LocalStorage
$scope.specialfields = getLocalStorage.getSpecialfields();
//Count the SpecialFields List
$scope.count = $scope.specialfields.length;
//Add Sfield - using AngularJS push to add sfield in the sfield Object
//Call BindTable_SpecialField to update the locally stored Sfield List
//Reset the AngularJS SpecialField scope
//Update the Count
$scope.addSpecialfield = function () {
$scope.specialfields.push({'specialfieldname': $scope.specialfieldname, 'specialfieldtype': $scope.specialfieldtype });
getLocalStorage.BindTable_SpecialField($scope.specialfields);
//$scope.sfno = '';
$scope.specialfieldname = '';
$scope.specialfieldtype = '';
$scope.count = $scope.specialfields.length;
};
//Delete Sfield - Using AngularJS splice to remove the sfield row from the sfield list
//All the Update sfield to update the locally stored sfield List
//Update the Count
$scope.deleteSpecialfield = function (specialfield) {
$scope.specialfields.splice($scope.specialfields.indexOf(specialfield), 1);
getLocalStorage.BindTable_SpecialField($scope.specialfields);
$scope.count = $scope.specialfields.length;
};
}]);
}
and this is StorageService.js
var storageService = angular.module('common', []);
storageService.factory('getLocalStorage', function () {
var specialfieldList = {};
return {
list: specialfieldList,
BindTable_SpecialField: function (SpecialfieldsArr) {
if (window.localStorage && SpecialfieldsArr) {
//Local Storage to add Data
localStorage.setItem("specialfields", angular.toJson(SpecialfieldsArr));
}
specialfieldList = SpecialfieldsArr;
},
getSpecialfields: function () {
//Get data from Local Storage
specialfieldList = angular.fromJson(localStorage.getItem("specialfields"));
return specialfieldList ? specialfieldList : [];
}
};
});
** Edit 2: Div with class portlet-body will have ng-view directive and will be my placeholder of my views.all of codes in this div will move
to List.html.another html file that will be rendered is Update.html
which it renders when Edit button will be clicked.

Bootstrap angular ui modal template not showing correctly

So I'm trying to show the modal template when a row is selected on the table.
The problem I am having is that when a row is clicked, a black shadowed line appears which is about 2px thick. It's supposed to be the modal I'm guessing but the modal isn't actually there in full with it's content.
Any ideas where I'm going wrong?
Code for HTML Index:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="ui-bootstrap-tpls-1.3.3.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="site.css">
</head>
<body>
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div ng-app="myTable" ng-controller="tableCtrl">
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
<tr ng-repeat="person in people" ng-click="changeRowData(person)">
<td>
{{person.FirstName}}
</td>
<td>
{{person.LastName}}
</td>
<td>
{{person.Age}}
</td>
<td>
{{person.Nickname}}
</td>
</tr>
</table>
</div>
<div class="centered">
<button type="button" class="btn btn-primary" data-ng-click="addEntry()">Add New Entry</button>
</div>
<div id="searchFirstName">
<div class="panel panel-primary">
<div class="panel-heading">Change Table Background Colour: </div>
<div class="panel-body">
<div id"buttonAndColours">
<button class="btn btn-primary" id="tableBackgroundButton" style="float: right">Change</button>
<div class="colours" style="background-color:red;"></div>
<div class="colours" style="background-color:yellow;"></div>
<div class="colours" style="background-color:lightBlue;"></div>
<div class="colours" style="background-color:green;"></div>
<div class="colours" style="background-color:white;"></div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Search For First Name in Table:</div>
<div class="panel-body">
<p>Search: <input type="text" ng-model="searchText"/> First Name being searched for: <u><b>{{searchText}}</u></b></p>
<br/>
<table class="table table-condensed">
<tr>
<th>First Names to be Searched For:</th>
</tr>
<tr ng-repeat="person in people | filter:searchText">
<td>{{ person.FirstName }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Code for Modal Template:
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
<form class="form-horizontal form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="firstname">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="firstN" ng-bind="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="lastname">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lastN" ng-bind="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ageN" ng-bind="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nickname">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nickN" ng-bind="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
Code for Javascript file:
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$http.get("xxxxxxxxx.json").success(function(response){
$scope.people = response.People;
});
$scope.changeRowData = function(changeableData) {
var modalTemplateInstance = $uibModal.open({
templateUrl: 'modalTemplate.html',
controller: function($scope) {
}
});
}
});

Does your browser console output any errors (press f12 or right click and select "inspect element", and navigate to console).
Also in your browsers dev tools, open the network pane and make sure it's recording. Then when you trigger your modal, is it successfully loading your modal template file?

Okay, found the solution alone. :)
Realised that the modal template means that some of the tags in the modal is not needed where they'd be needed when hard coding the modal into the html page.
Redited the modalTemplate file to:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
<form class="form-horizontal form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="firstname">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="firstN" ng-bind="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="lastname">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="lastN" ng-bind="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ageN" ng-bind="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nickname">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nickN" ng-bind="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
</div>

Not able to take data from table and set to bootstrap modal

I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>

In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example

Clear the form after submit angularjs

hi i want to clear the form values after successfull completion. Houw should i implemnt
<div ng-controller="employeelistController as listControl">
<div class="container form-group" ng-controller="addEmployee as addemp">
<form name="frmEmployee" ng-submit="Add(addemp.employee) && frmEmpbloyee.$valid">
<div class="col-lg-4 ctrmain">
<div class="row">
<div class="col-lg-6">
<strong>Employee No</strong>
</div>
<div class="col-lg-6">
<input type="number" id="txtEmpId" ng-model="addemp.employee.employeeid" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>FirstName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtfirstName" ng-model="addemp.employee.firstname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>LastName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtlastName" ng-model="addemp.employee.lastname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>Department</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtDept" ng-model="addemp.employee.department" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>DOB</strong>
</div>
<div class="col-lg-6">
<input type="date" id="DTdob" ng-model="addemp.employee.dateofbirth" required class="form-control" />
</div>
</div>
<div class="row">
<input type="submit" id="btnSubmit" class="btn btn-primary value=" save" />
</div>
</div>
which is the best way to implement this. I have tried many ways. please help.
$scope.Add = function (emp,$scope) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
$scope.emp = null;
}
which is the best way to implement this. I have tried many ways. please help.

First of all you don't need $scope in the argument of the Add function.
$scope.Add = function (emp) {
this.EmployeeObject = angular.copy(emp);
employees.push(this.EmployeeObject);
this.employee=null;
$scope.$setPristine(true);
}

update it with the demo
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
$scope.empList = [];
$scope.addemp = {};
$scope.saveEmp = function(){
$scope.empList.push($scope.addemp);
$scope.reset();
};
$scope.reset = function() {
$scope.addemp = {};
$scope.form.$setPristine();
}
});
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<form name="form" id="form" novalidate ng-submit="saveEmp()">
<div class="row">
<div class="col-lg-6">
<strong>Employee No</strong>
</div>
<div class="col-lg-6">
<input type="number" id="txtEmpId" ng-model="addemp.employeeid" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>FirstName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtfirstName" ng-model="addemp.firstname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>LastName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtlastName" ng-model="addemp.lastname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>Department</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtDept" ng-model="addemp.department" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>DOB</strong>
</div>
<div class="col-lg-6">
<input type="date" id="DTdob" ng-model="addemp.dateofbirth" required class="form-control" />
</div>
</div>
<div class="row">
<button type="submit" ng-disabled="form.$invalid ">submit</button>
<button type="reset" ng-disabled="form.$pristine" ng-click="reset()">reset</button>
</div>
</form>
<p>form: {{addemp | json}}</p>
<p>empList: {{empList | json}}</p>
<p>Pristine: {{form.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre>
</p>
</div></div>
$scope.Add = function (emp) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
$scope.emp = {}; // initialize the form to empty object
$scope.frmEmployee.$setPristine(); // set it to as user has not interacted with the form.
}

I have cleared textbox with below code. e.g I have cleared FirstName textbox.
HTML SECTION
<td ng-show="a">
<input type="text" ng-model="e.FirstName" />
</td>
Controller SECTION
e.FirstName= "";

var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
function resetform() {
document.getElementById("frmEmployee").reset();
}
$scope.Add = function (emp,$scope) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
resetform();
}
});

Its pure JavaScript with simple one line code.
document.getElementById('yourFormId').reset()
Add this syntax at the end of the function in controller after submitting the form.