AngularJS $routeProvider not displaying html page in <div ng-view> - angularjs

I am new to AngularJS and need some help to solve an issue routing to another html page while passing a parameter. My application has a form with input fields (name & course). That information the user inputs will display in a table that is hidden unless it has data to display.
The issue is when clicking on the Display Info link, I am not being routed to the DisplayInfo.html page.
Here is the code: http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview
app.js file
var app = angular.module('student', []);
app.controller('StudentController', function($scope) {
$scope.studentList = [];
$scope.addStudent = function() {
this.studentList.push({
name: $scope.getName,
course: $scope.getCourse,
date: new Date()
});
$scope.getName = "";
$scope.getCourse = "";
};
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/DisplayInfo/:name', {
templateUrl: 'DisplayInfo.html',
controller: 'DisplayInfoController'
});
}
]);
app.controller('DisplayInfoController', function($scope, $routeParams) {
$scope.name = $routeParams.getName;
});
});
Index.html
<!DOCTYPE html>
<html ng-app="student">
<head>
<link rel="stylesheet" type="text/css" href="student.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<h1>Student Access</h1>
<p>
<fieldset>
<br />
<br />
<form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()">
<div ng-if="studentList.length > 0">
<table class="table table-striped">
<tr>
<th>
Name
</th>
<th>
Course
</th>
<th>
Date
</th>
</tr>
<tr ng-repeat="getStudent in studentList track by $index">
<td ng-bind="getStudent.name">
</td>
<td ng-bind="getStudent.course">
</td>
<td ng-bind="getStudent.date | date:'MM-dd-yyyy'">
</td>
<td>Display Info</td>
</tr>
</table>
</div>
<div ng-view></div>
<br />
<fieldset class="form-group">
<legend><strong>First Name</strong></legend>
<input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" />
</fieldset>
<fieldset class="form-group">
<legend><strong>Course</strong></legend>
<input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" />
</fieldset>
<input type="submit" class="btn btn-primary pull-right" value="Add Info" />
</form>
</fieldset>
</div>
</div>
<!-- AngularJS Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="app.js"></script>
</body>
DisplayInfo.html
Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.


I think a / is missing in :
<td>Display Info</td>
It should be :
<td>Display Info</td>

Related

When I click reset button or load this page, all the fields are empty

Output image:
I tried comparing the original code with this but I'm unable to find any mistakes. I'm very confused why this is not working. When page is reloaded or reset button is clicked all fields has to be filled with details but its not happening. What might be the mistake?
<html>
<head>
<title>Angular practice</title>
</head>
<body>
<div ng-app="" ng-controller="studentController">
<form name="studentForm" novalidate>
<table>
<tr>
<td>first name</td>
<td><input name="firstname" type="text" ng-model="firstName" required>
<span style="color: red;" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
<span ng-show="studentForm.firstname.$error.required">enter first name</span>
</span>
</td>
</tr>
<tr>
<td>last name</td>
<td><input name="lastname" type="text" ng-model="lastName" required>
<span style="color: red;" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
<span ng-show="studentForm.lastname.$error.required">enter last name</span>
</span>
</td>
</tr>
<tr>
<td>email</td>
<td><input name="email" type="email" ng-model="email" required>
<span style="color: red;" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
<span ng-show="studentForm.email.$error.required">enter email ID</span>
<span ng-show="studentForm.email.$error.email">Invalid email</span>
</span>
</td>
</tr>
<tr>
<td><button ng-click="reset()">Reset</button></td>
<td><button ng- disabled="studentForm.firstname.$dirty &&
studentForm.firstname.$invalid ||
studentForm.lastname.$dirty && studentForm.lastname.$invalid||
studentForm.email.$dirty && studentForm.email.$invalid"
ng-click="submit()">Submit</button>
</td>
</tr>
</table>
</form>
</div>
<script>
function studentController($scope){
$scope.reset = function(){
$scope.firstName = "uthej";
$scope.lastName = "ks";
$scope.email = "uthej#gmail.com";
}
$scope.reset();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>

ng-app is missing in your HTML code and you are not injecting controller in app.
HTML Code
<div ng-app="myApp" ng-controller="studentController">
Js code
var app = angular.module('myApp', []);
app.controller('studentController', function ($scope) {
$scope.reset = function () {
$scope.firstName = "uthej";
$scope.lastName = "ks";
$scope.email = "uthej#gmail.com";
}
$scope.reset();
});

you have misspelled HTML & Script, Correct one is..
Html::
<div ng-app="demoApp" ng-controller="studentController">
<form name="studentForm" novalidate>
// form fields will goes here....
</form>
</div>
& script::
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("demoApp", []);
app.controller("studentController", function($scope){
$scope.reset = function(){
$scope.firstName = "uthej";
$scope.lastName = "ks";
$scope.email = "uthej#gmail.com";
};$scope.reset();
});
</script>
I hope it will work for you.

Bootstrap fails with AngularJS (and having first row being different)

Trying to learn AngularJS and a hole bunch of frameworks at the same time (doomed to go wrong).
I got this far, but have some issues with the bootstrap not working..
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title>Learning firebase and angularJS</title>
<script data-require="moment.js#*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script data-require="chance#*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body style="margin:20px" ng-controller="employeeCtrl">
<div class="">
<button class="btn btn-default" ng-click="saveEmployee()">
Save
<span class="glyphicon glyphicons-ok"></span>
</button>
</div>
<div class="">
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody ng-repeat="employee in employees" ng-class-odd="oddRow">
<tr>
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function employeeCtrl($scope) {
refresh = function() {
$scope.employeeName = new Chance().name();
$scope.employeeAge = new Chance().age();
}
$scope.employees = {};
refresh();
$scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");
$scope.saveEmployee = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
$scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
refresh();
};
$scope.myData.on('value', function(snapshot){
$scope.employees = snapshot.val();
$scope.$apply(); // temp. solution
});
};
</script>
<script>
var datetime = null, date = null;
moment.locale('da');
var update = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
datetime.html(dateStr);
};
$(document).ready(function() {
datetime = $('#datetime')
update();
setInterval(update, 1000);
});
</script>
</body>
</html>
http://plnkr.co/edit/MA52T3?p=preview
Now there should appear a striped table and a glyphicon at the save button.. But there is not.. Any help would be appreciated.
Bonus angular table row questions
I first tried to make the input part of the first row and the do a angular for-loop, but somehow this doesn't work..
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="utf-8" />
<title>Learning firebase and angularJS</title>
<script data-require="moment.js#*" data-semver="2.10.2" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script data-require="chance#*" data-semver="0.5.3" src="http://chancejs.com/chance.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body style="margin:20px" ng-controller="employeeCtrl">
<div class="">
<button class="btn btn-default" ng-click="saveEmployee()">
Save
<span class="glyphicon glyphicons-ok"></span>
</button>
</div>
<div class="">
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Datetime</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
<span ng-repeat="employee in employees">
<tr>
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</span>
</tbody>
</table>
</div>
<script>
function employeeCtrl($scope) {
refresh = function() {
$scope.employeeName = new Chance().name();
$scope.employeeAge = new Chance().age();
}
$scope.employees = {};
refresh();
$scope.myData = new Firebase("https://hello-firebase-world.firebaseio.com/Employees");
$scope.saveEmployee = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
$scope.myData.push({employeeName: $scope.employeeName, employeeAge: $scope.employeeAge, timestamp: dateStr});
refresh();
};
$scope.myData.on('value', function(snapshot){
$scope.employees = snapshot.val();
$scope.$apply(); // temp. solution
});
};
</script>
<script>
var datetime = null, date = null;
moment.locale('da');
var update = function() {
date = moment(new Date())
dateStr = date.format('YYYY.MM.DD') + " # " + date.format("LTS");
datetime.html(dateStr);
};
$(document).ready(function() {
datetime = $('#datetime')
update();
setInterval(update, 1000);
});
</script>
</body>
</html>
http://plnkr.co/edit/x6fSbG?p=info

There is a typo in the bootstrap-part. Change it to:
<span class="glyphicon glyphicon-ok"></span>
Bonus-question: Simply remove the wrapping <span>:
<tbody>
<tr>
<td>
<div class="label label-primary" id="datetime"></div>
</td>
<td>
<label>Employee Name</label>
<input type="text" ng-model="employeeName" />
</td>
<td>
<label>Employee Age</label>
<input type="number" ng-model="employeeAge" />
</td>
</tr>
<tr ng-repeat="employee in employees" >
<td>{{employee.timestamp}}</td>
<td>{{employee.employeeName}}</td>
<td>{{employee.employeeAge}}</td>
</tr>
</tbody>

The glyphicons-ok doesn't exist in your stylesheets, use glyphicon-ok instead.
For your striped table, you're generating all oddRows, shouldn't they be alternating with evenRows...

About button u have mistake there. Change:
<span class="glyphicon glyphicon-ok"></span>
About include angular. This example structure will work:
<!doctype html>
<html ng-app='project'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<base href="/">
</head>
<body>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="controllers/main_controller.js" type="text/javascript"></script>
</body>
</html>

materializecss and angular app

I'm trying to build an app in angularJS and materializeCSS. The page loads, but I have a button that should open a pop-up form and although I tried several times, I can't figure out the problem :(
I've tried with <a href> but it's the same problem, I can't see any pop and as well, I don't see any errors in the console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<link rel="stylesheet" href="libs/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
.width-30-pct{
width:30%;
}
.text-align-center{
text-align:center;
}
.margin-bottom-1em{
margin-bottom:1em;
}
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="productsCtrl">
<div class="row">
<div class="col s12">
<h4>Products</h4>
<!-- used for searching the current list -->
<input type="text" ng-model="search" class="form-control" placeholder="Search product..."/>
<!-- table that shows product record list -->
<table class="hoverable bordered">
<thead>
<tr>
<th class="text-align-center">ID</th>
<th class="width-30-pct">Name</th>
<th class="width-30-pct">Description</th>
<th class="text-align-center">Price</th>
<th class="text-align-center">Action</th>
</tr>
</thead>
<tbody ng-init="getAll()">
<tr ng-repeat="d in names | filter:search">
<td class="text-align-center">{{ d.id }}</td>
<td>{{ d.name }}</td>
<td>{{ d.description }}</td>
<td class="text-align-center">{{ d.price }}</td>
<td>
<a ng-click="readOne(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">edit</i>Edit</a>
<a ng-click="deleteProduct(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">delete</i>Delete</a>
</td>
</tr>
</tbody>
</table>
<!-- floating button for creating product -->
<div class="fixed-action-btn" style="bottom:45px; right:24px;">
<!-- <a class="btn-floating btn-large waves-effect waves-light red" href="#modal1" ng-click="showCreateForm()"><i class="material-icons">add</i></a> */-->
<button data-target="modal1" class="btn-floating btn-large waves-effect waves-light red" ng-click="showCreateForm()">Add</button>
</div>
<!-- modal for for creating new product -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4 id="modal-product-title">Create New Product</h4>
<div class="row">
<div class="input-field col s12">
<input ng-model="name" type="text" class="validate" id="form-name" placeholder="Type name here..." />
<label for="name">Name</label>
</div>
<div class="input-field col s12">
<textarea ng-model="description" type="text" class="validate materialize-textarea" placeholder="Type description here..."></textarea>
<label for="description">Description</label>
</div>
<div class="input-field col s12">
<input ng-model="price" type="text" class="validate" id="form-price" placeholder="Type price here..." />
<label for="price">Price</label>
</div>
<div class="input-field col s12">
<a id="btn-create-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="createProduct()"><i class="material-icons left">add</i>Create</a>
<a id="btn-update-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="updateProduct()"><i class="material-icons left">edit</i>Save Changes</a>
<a class="modal-action modal-close waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">close</i>Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<!--angular -->
<script src="libs/js/angular.min.js"></script>
<script>
// angular js codes will be here
var app = angular.module('myApp', []);
app.controller('productsCtrl', function($scope, $http) {
$scope.showCreateForm = function(){
// clear form
$scope.clearForm();
// change modal title
$('#modal-product-title').text("Create New Product");
// hide update product button
$('#btn-update-product').hide();
// show create product button
$('#btn-create-product').show();
}
// clear variable / form values
$scope.clearForm = function(){
$scope.id = "";
$scope.name = "";
$scope.description = "";
$scope.price = "";
}
// create new product
$scope.createProduct = function(){
// fields in key-value pairs
$http.post('create_product.php', {
'name' : $scope.name,
'description' : $scope.description,
'price' : $scope.price
}
).success(function (data, status, headers, config) {
console.log(data);
// tell the user new product was created
Materialize.toast(data, 4000);
// close modal
$('#modal-product-form').closeModal();
// clear modal content
$scope.clearForm();
// refresh the list
$scope.getAll();
});
}
});
// jquery codes will be here
</script>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>

In your showCreateForm function you need to add code to show the modal:
$scope.showCreateForm = function(){
// clear form
$scope.clearForm();
// change modal title
$('#modal-product-title').text("Create New Product");
// hide update product button
$('#btn-update-product').hide();
// show create product button
$('#btn-create-product').show();
// show modal
$('#modal1').show();
}
Here it is in Plunker with the above fix:
https://plnkr.co/edit/sUb43sKyBGaIGpBXvcrP?p=preview

Try using directives instead of jQuery code in controllers. There are repos that have angular+materilizecss in GitHub
Check : http://krescruz.github.io/angular-materialize/#getting-started

how to connect between bootstrap ui modal input to html page with angular

I have two pages of html. one is the main page and the other is the modal page.
I use one angular app to connect between them. I get input in the modal page and i want to show it in the main page. i don't know how to do it, although I think it might work with service.
the main page:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<table ng-controller="tableCtrl">
<thead>
<th class="col-lg-3">Username</th>
<th class="col-lg-3">Password</th>
<th class="col-lg-3">First name</th>
<th class="col-lg-3">Last name</th>
</thead>
<tbody>
<tr ng-repeat="User in Users">
<td class="col-lg-3">{{User.userN}}</td>
<td class="col-lg-3">{{User.PassW}}</td>
<td class="col-lg-3">{{User.Name}}</td>
<td class="col-lg-3">{{User.LastName}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
the modal page :
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="app.js"></script>
<link href="vandors/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl" ng-submit="ok()">
<div class="modal-header">
<h3>users</h3>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="form-group">
<label>Username : </label>
<input type="text" placeholder="Ariel73" ng-model="userN">
</div>
<div class="form-group">
<label>Password : </label>
<input type="text" placeholder="Aa123456" ng-model="PassW">
</div>
<div class="form-group">
<label>First name : </label>
<input type="text" placeholder="Ariel" ng-model="Name">
</div>
<div class="form-group">
<label>Last name : </label>
<input type="text" placeholder="Livshits" ng-model="LastName">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">submit</button>
</div>
</div>
</form>
</body>
</html>
the app page :
app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'table.html',
controller: 'ModalInstanceCtrl',
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
app.controller('tableCtrl',function($scope){
$scope.Users = [
{'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
{'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
{'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'}
];
$scope.addRow = function () {
$scope.Users.push({'userN' : $scope.userN, 'PassW' : $scope.PassW, 'Name' : $scope.Name, 'LastName' : $scope.LastName});
$scope.userN = '';
$scope.PassW = '';
$scope.Name = '';
$scope.LastName = '';
}
});

Angular is used with Single Page Applicaton layout, it seems that must only exists a single page for application (ng-app) and it may use multiple partials or templates.
Usually the main page contais the web layout (header, navbar, content, footer) and with the templates switch the content according to the current state (managed by the url)
In your example the main page will be the "single page" and the modal will be s partial/template. This template could be request to the server as response of table.html or defined as a template within the main page using <script type='text/ng-template' id='table.html'>.
app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('AppCtrl', function($scope, $modal, $log) {
$scope.Users = [{
'userN': 'Ariel',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}, {
'userN': 'Ariel',
'PassW': 'Aa123456',
'Name': 'Ariel',
'LastName': 'Livshits'
}];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'table.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(newUser) {
$scope.Users.push(newUser);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {
$scope.ok = function() {
$modalInstance.close({
'userN': $scope.userN,
'PassW': $scope.PassW,
'Name': $scope.Name,
'LastName': $scope.LastName
});
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AppCtrl">
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<table>
<thead>
<th class="col-lg-3">Username</th>
<th class="col-lg-3">Password</th>
<th class="col-lg-3">First name</th>
<th class="col-lg-3">Last name</th>
</thead>
<tbody>
<tr ng-repeat="User in Users">
<td class="col-lg-3">{{User.userN}}</td>
<td class="col-lg-3">{{User.PassW}}</td>
<td class="col-lg-3">{{User.Name}}</td>
<td class="col-lg-3">{{User.LastName}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/ng-template" id="table.html">
<form ng-submit="ok()">
<div class="modal-header" >
<h3>users</h3>
</div>
<div class="modal-body">
<div class="panel-body">
<div class="form-group">
<label>Username :</label>
<input type="text" placeholder="Ariel73" ng-model="userN">
</div>
<div class="form-group">
<label>Password :</label>
<input type="text" placeholder="Aa123456" ng-model="PassW">
</div>
<div class="form-group">
<label>First name :</label>
<input type="text" placeholder="Ariel" ng-model="Name">
</div>
<div class="form-group">
<label>Last name :</label>
<input type="text" placeholder="Livshits" ng-model="LastName">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</script>
</body>
</html>

AngularJS: Value from Page Not Showing in Modal on Click

I have a button (link) on a modal that when clicked (copySummaryToTask($event)) is supposed to copy data from the page's $scope element (thisRequest) into the modal's $scope element (nTask). It copies the correct data into the $scope but the data doesn't appear in the modal even though I am using $scope.$apply();
Here's the plunkr.
Here's my controller:
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function($scope){
$scope.NewTaskPane = false;
$scope.thisRequest = {
ID: 543,
Title: 'Create This Wonderful SharePoint 2013 SPA',
Request_Summary: "Rule fruit and under female she'd every signs creepeth good Night, fly lesser they're be green cattle and living tree also spirit us years two. Seasons he good under creepeth fifth air is. For morning. It creeping multiply from, saying.",
Request_Type: 'Web'
};
$scope.Tasks = [
{ID: 20, Title: 'Prototype App', Assigned_To: 'Wayne, Bruce', Status: 'Completed', TOT: 4.5},
{ID: 21, Title: 'Develop App CSS', Assigned_To: 'Prince, Diana', Status: 'Completed', TOT: 6}
];
$scope.addNewTask = function($event){
$event.preventDefault();
$scope.NewTaskPane = true;
$scope.nTask = {
ID: $scope.Tasks.length + 1,
Request_ID: $scope.thisRequest.ID,
Title: $scope.thisRequest.Title,
Status: 'Assigned',
Resource_Instructions: ''
};
};
$scope.copySummaryToTask = function($event){
$event.preventDefault();
//alert($scope.thisRequest.Request_Summary);
$scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
if (!$scope.$$phase) { $scope.$apply(); }
} // end copySummaryToTask fn
}); // end main controller
and here's the view:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<div id="overlay" data-ng-show="NewTaskPane">
<div class ="preference_form wModal" id="frmPreference">
<form name="frmNewTask" ng-submit="saveNewTask($event)">
<span class="close-modal">
close
</span>
<h1>New Task</h1>
<div class="row">
<div class="form-group col-lg-12">
<label for="description">Task Title:</label>
<input type="text" class="form-control" name="Title" ng-model="nTask.Title">
</div>
</div>
<div class="row">
<div class="form-group col-lg-12">
<label>Additional Instructions for Resource:</label>
<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
<button class="btn btn-link" style="float:right;" ng-click="copySummaryToTask($event)">Copy Customer Request Summary.</button>
</div>
</div>
<div class="frmElementSubmit">
<input type="button" class="btn btn-default" value="CANCEL" ng-click="NewTaskPane = false" />
<input type="submit" class="btn btn-primary" value="SAVE" ng-click="NewTaskPane = false" />
</div>
</form>
<pre>{{nTask | json}}</pre>
</div>
</div>
<div class="frmFull_Page">
<h1 class="frmTitle">Edit Request</h1>
<div class="frmBar clr-purple">
<h3>Request Information</h3>
</div>
<div class="frm_pane">
<div class="row">
<form name="EditSapForm" role="form">
<!-- ID / TITLE -->
<div class="row">
<div class="form-group col-lg-3">
<label for="req_id">Request ID:</label>
<input type="text" class="form-control" name="ID" ng-model="thisRequest.ID" disabled="disabled">
</div>
<div class="form-group col-lg-9">
<label for="title">Title:</label>
<input type="text" class="form-control" id="Title" ng-model="thisRequest.Title">
</div>
</div>
<!-- WORK SUMMARY -->
<div class="row">
<div class="form-group col-lg-12">
<label>Work Summary:</label>
<textarea name="Request_Summary" class="form-control" rows="5" ng-model="thisRequest.Request_Summary"></textarea>
</div>
</div>
<!-- WORK TASKS*** -->
<div class="row">
<div class="form-group col-lg-12">
<div class="row">
<div class="form-group col lg-12" style="margin-left:16px;">
<label>Work Tasks [{{Tasks.length}}]</label>
<table class="table table-striped" style="width:90%; margin:5px auto;">
<tr>
<th>ID</th>
<th>TITLE</th>
<th>ASSIGNED TO:</th>
<th>STATUS</th>
<th>TOT</th>
<th> </th>
</tr>
<tr ng-hide="Tasks.length">
<td colspan="6"><b>No Tasks Found!</b></td>
</tr>
<tr ng-repeat="task in Tasks">
<td>{{task.ID}}</td>
<td>{{task.Title}}</td>
<td>{{task.Assigned_To}}</td>
<td>{{task.Status}}</td>
<td>{{task.TOT}}</td>
<td>edit</td>
</tr>
<tr>
<td colspan="6"><a ng-click="addNewTask($event)">Add New Task</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- SUBMIT BUTTON*** -->
<div class="row" style="margin-top:30px;">
<div class="form-actions col-lg-12">
<button type="submit" class="btn btn-primary">SUBMIT</button>
</div>
</div>
</form>
</div> <!-- end row -->
</div> <!-- end frm_pane -->
</div> <!-- end frmFull_Page-->
</body>
</html>

There's a typo in your view:
<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
... where ntask should be nTask. Once you fix it, you won't need the $scope.apply():
$scope.copySummaryToTask = function($event){
$event.preventDefault();
$scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
} // end copySummaryToTask fn

Replace
<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
With
<textarea class="form-control" rows="5" ng-model="nTask.Resource_Instructions"></textarea>
This will do it, plus capture any new text added by the user.

Resources