I am working on a sample app using angularJS.
I have a service which returns JSON object, I am trying to bind the response to a table.
Controller -
(function () {
var app = angular.module('searchApp', []);
app.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['http://localhost:11838/SearchProfiles/get']);
});
var controller = app.controller('searchController', ["$scope", "$http", function ($scope, $http) {
$scope.profileName = "";
$http.get("http://localhost:11838/SearchProfiles/GetAllRuleSets")
.then(function (response) {
$scope.ruleSets = response.data;
});
$scope.searchProfiles = function () {
$http.get("http://localhost:11838/SearchProfiles/GetProfiles?profileName=" + $scope.profileName
+ "&ruleSetName=" + $scope.selectedRuleSet)
.then(function (response) {
$scope.showProfiles = true;
$scope.profiles = response.data;
console.log($scope.profiles);
});
};
$scope.clearForm = function () {
$scope.profileName = "";
$scope.selectedRuleSet = "";
};
}]);
})();
cshtml -
#{
ViewBag.Title = "Search Profiles";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search Profiles</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
#Scripts.Render("~/Scripts/angular")
#Styles.Render("~/Content/css/scss")
</head>
<body ng-app="searchApp">
<div ng-controller="searchController" id="content">
<label>Profile Name: </label>
<input type="text" name="profileName" ng-model="profileName" /><br />
<label>RuleSet Name: </label>
<select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
<button name="search" ng-click="searchProfiles()">Search</button>
<button name="clear" ng-click="clearForm()">Clear</button>
</div>
<div ng-controller="searchController" id="profilesDiv">
<table>
<tr ng-repeat="x in profiles">
<td>{{ x.ProfileName }}</td>
<td>{{ x.CreationDate }}</td>
</tr>
</table>
</div>
</body>
I am getting back following response -
[{"ProfileName":"Profile3","CreationDate":"1/9/2017"},{"ProfileName":"Profile4","CreationDate":"12/30/2016"}]
but even after setting $scope.profiles I am not seeing table on UI.
I'm fairly new to angular, am I missing something obvious.
Any help is appreciated.
The problem is that you are fetching the data in one scope (the div content where you declare ng-controller="searchController") and then trying to
view the data in another scope (the div profilesDiv where you again declare the ng-controller="searchController").
To solve the problem you need to remove ng-controller="searchController" from the profilesDiv and move the profilesDiv inside the content div.
Like this:
<body ng-app="searchApp">
<div ng-controller="searchController" id="content">
<label>Profile Name: </label>
<input type="text" name="profileName" ng-model="profileName" /><br />
<label>RuleSet Name: </label>
<select ng-model="selectedRuleSet" ng-options="x for x in ruleSets"></select><br />
<button name="search" ng-click="searchProfiles()">Search</button>
<button name="clear" ng-click="clearForm()">Clear</button>
<div id="profilesDiv">
<table>
<tr ng-repeat="x in profiles">
<td>{{ x.ProfileName }}</td>
<td>{{ x.CreationDate }}</td>
</tr>
</table>
</div>
</div>
</body
Related
Hello, so I prettty much copied this code and it doesn't work for me, but does for other people (the entire html and php)
When I try the query in SQL Management it works, so I don't think it's the database
When I try to read from the database it's just blank, no errors in the console
Here is my select.php:
<?php
//select.php
$connect = mysqli_connect("den1.mssql5.gear.host", "testiranje", "nijebitno#", "testiranje");
$output = array();
$query = "SELECT * FROM dbo.tbl_user";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
}
?>
And here is my index.html:
<!DOCTYPE html>
<!-- index.php !-->
<html>
<head>
<title>Webslesson Tutorial | AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h3 align="center">AngularJS Tutorial with PHP - Fetch / Select Data from Mysql Database</h3>
<div ng-app="myapp" ng-controller="usercontroller" ng-init="displayData()">
<label>First Name</label>
<input type="text" name="first_name" ng-model="firstname" class="form-control" />
<br />
<label>Last Name</label>
<input type="text" name="last_name" ng-model="lastname" class="form-control" />
<br />
<input type="submit" name="btnInsert" class="btn btn-info" ng-click="insertData()" value="ADD"/>
<br /><br />
<table class="table table-bordered">
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="x in names">
<td>{{x.first_name}}</td>
<td>{{x.last_name}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.insertData = function(){
$http.post(
"insert.php",
{'firstname':$scope.firstname, 'lastname':$scope.lastname}
).success(function(data){
alert(data);
$scope.firstname = null;
$scope.lastname = null;
$scope.displayData();
});
}
$scope.displayData = function(){
$scope.names = new Array;
$http.get("select.php")
.success(function(data){
console.log("sranje");
$scope.names = data;
console.log(data);
});
}
});
</script>
You can try adding
header('Content-type: application/json');
before your echo in php function. In this way you "tell" that your php function return json data.
<?php
//select.php
$connect = mysqli_connect("den1.mssql5.gear.host", "testiranje", "nijebitno#", "testiranje");
$output = array();
$query = "SELECT * FROM dbo.tbl_user";
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
header('Content-type: application/json');
echo json_encode($output);
}
?>
I'm currently learning Electron and using AngularJS.
I've my REST api in node and express and my database is MongoDB.
this is my route
router.get('/branch/:branch',function (req,res,next) {
var br = req.params.branch;
var final = [];
db.collection('users').find({"branch": br}, function (err, docs) {
docs.forEach(function (ele) {
console.log(ele['fir_id']);
final.push(ele['fir_id']);
})
db.punch_coll.find(function (err, docs) {
var d = [];
console.log(final);
docs.forEach(function (ele) {
console.log(ele['fir_id']);
if(final.includes(parseInt(ele['fir_id']))) {
ele['date'] = ele['date'].toDateString();
ele['punch_in'] = ele['punch_in'].substring(0, 8);
ele['punch_out'] = ele['punch_out'].substring(0, 8);
d.push(ele);
}
console.log(d);
})
console.log(d);
res.send(d);
})
});
});
punch_coll document
{
_id: 58e21075e0c6800ce8b08d92,
fir_id: '4',
date: 'Mon Apr 03 2017',
punch_in: '14:35:57',
punch_out: ''
}
user document
{
_id: 58e20ee0e0c6800ce8b08d82,
name: 'A B C',
fir_id: 1,
branch: 'CSE',
year: 'SE'
}
HTML and Angular Controller Script
<body ng-app="myApp" ng-controller="myCtrl">
<form class="pure-form">
<strong>Enter FIR-ID</strong> <input type="text" ng-model="fid" ng-
change="change()" class="pure-input-rounded">
</form>
</br>
<div class="pure-g">
<div class="pure-u-8-24" style="border-style: solid;border-
color:lightgrey;">
<header class="w3-container w3-light-grey">
<h2>Fir ID :- {{fid}}</h2>
<h3>Name :- {{user[0].name}} </h3>
</header>
<div class="w3-container">
<h2>Branch :- {{user[0].branch}} </h2>
<hr>
<h2>Academic Year :- {{user[0].year}} </h2>
</div>
</div>
</div>
<form class="pure-form">
<select id="state" ng-model="branch" ng-change="changeBranch()">
<option>CSE</option>
<option>MECH</option>
<option>CIVIL</option>
<option>ENTC</option>
</select>
</form>
<!-- <h2>Fir ID :- {{fid}}</h2>
<h2>Name :- {{user[0].name}} </h2>
<h2>Branch :- {{user[0].branch}} </h2>
<h2>Academic Year :- {{user[0].year}} </h2> -->
<div style="right:0;top:0;position:absolute;font-size:20px;">
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>Fir ID</th>
<th>Date</th>
<th>Punch In</th>
<th>Punch Out</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in name">
<td>{{ x.fir_id }}</td>
<td>{{ x.date }}</td>
<td>{{ x.punch_in }}</td>
<td>{{ x.punch_out }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
// You can also require other files to run in this process
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
$scope.name;
$scope.user;
$scope.fid;
$scope.branch='CSE';
$scope.change = function() {
//get punches for specific fir_id
$http.get('http://localhost:3000/users/'+$scope.fid)
.then(function(response) {
$scope.user=response.data;
})
//get punches for specific fir_id
$http.get('http://localhost:3000/punch/'+$scope.fid)
.then(function(response) {
console.log(response.status);
$scope.name=response.data;
}, function errorCallback(response) {
$scope.name=null;
});
};
$scope.changeBranch = function(){
//get record as per branch
$http.get('http://localhost:3000/branch/'+$scope.branch)
.then(function(response) {
console.log(response.status);
$scope.name=response.data;
}, function errorCallback(response) {
$scope.name=null;
});
};
});
The table is rendering slow for large json takes 1second it's like it's lagging.
I'm new to this so of course I'm doing something horrible. I think the way I'm using that async functions are bad also but dont know whats making it slow foreach or anything else.
So, after replacing foreach with simple for loop it solved the problem but I don't know whats the exact reason. Anyone had same problem?
I am in the process of learning how to make custom directives in AngularJS.
I have this simple program that works well and I would like to refactor it into a custom directive. I would like the directive element to be the div that is a child of the body tag. I am having trouble imagining how the slider values would be passed up and down the DOM from the input tags to the div and the other way around.
Code:
<html ng-app="DualSlidersApp">
<head>
<meta charset="UTF-8">
<title>DualSlidersApp</title>
<style>
.indented { margin-left: 61px; }
</style>
<script src="js/angular.js"></script>
<script>
'use strict';
var app = angular.module('DualSlidersApp', []);
app.controller('DualSlidersController', ['$scope', function($scope) {
$scope.firstRangeSliderValue = 10;
$scope.secondRangeSliderValue = 20;
$scope.reconcileSliders = function reconcileSliders(drivenByWhichSlider) {
if ($scope.firstRangeSliderValue > $scope.secondRangeSliderValue) {
if (drivenByWhichSlider === 'drivenByTheFirstSlider') {
$scope.secondRangeSliderValue = $scope.firstRangeSliderValue;
} else {
$scope.firstRangeSliderValue = $scope.secondRangeSliderValue;
}
}
}
}]);
</script>
</head>
<body ng-controller="DualSlidersController">
<div>
<table>
<tr>
<td>
<input type="range" min="10" max="30" step="2"
ng-model="firstRangeSliderValue"
ng-change="reconcileSliders('drivenByTheFirstSlider');">
</td>
<td>{{ firstRangeSliderValue }}</td>
</tr>
<tr>
<td>
<input type="range" min="20" max="40" step="2" class="indented"
ng-model="secondRangeSliderValue"
ng-change="reconcileSliders('drivenByTheSecondSlider');">
</td>
<td>{{ secondRangeSliderValue }}</td>
</tr>
</table>
</div>
</body>
</html>
I'd assume you meant sharing data between the directive and the controller when you wrote "how the slider values would be passed up and down the DOM from the input tags to the div and the other way around".
Binding is probably the best use of angular that you can implement here. bind 2 variables from the controller's scope to the directive's scope, each one represents the value of each slider. I would also suggest to pass a function to the directive's scope as well, so the ng-change would be calledback in the controller. It should look something like this:
directive.js
app.directive('dualSlidersDirective', function() {
return {
scope: {
sliderOneValue: '=',
sliderTwoValue: '=',
onSliderChange: '&'
},
templateUrl: 'directive.html'
};
});
directive.html:
<div>
<table>
<tr>
<td>
<input type="range" min="10" max="30" step="2"
ng-model="sliderOneValue"
ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheFirstSlider\'})">
</td>
<td>{{ sliderOneValue }}</td>
</tr>
<tr>
<td>
<input type="range" min="20" max="40" step="2" class="indented"
ng-model="sliderTwoValue"
ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheSecondSlider\'})">
</td>
<td>{{ sliderTwoValue }}</td>
</tr>
</table>
</div>
And don't forget to bind the relevant variables and function from your controller's scope in the main html, notice that functions receive their arguments as a hash (the key being the name of the parameter and the value being the value of it). it is very important to keep the same names of the variables throughout the script
So the entire thing should look something like this:
<html ng-app="DualSlidersApp">
<head>
<meta charset="UTF-8">
<title>DualSlidersApp</title>
<style>
.indented { margin-left: 61px; }
</style>
<script src="js/angular.js"></script>
<script>
'use strict';
var app = angular.module('DualSlidersApp', []);
app.controller('DualSlidersController', ['$scope', function($scope) {
$scope.firstRangeSliderValue = 10;
$scope.secondRangeSliderValue = 20;
$scope.reconcileSliders = function reconcileSliders(drivenByWhichSlider) {
if ($scope.firstRangeSliderValue > $scope.secondRangeSliderValue) {
if (drivenByWhichSlider === 'drivenByTheFirstSlider') {
$scope.secondRangeSliderValue = $scope.firstRangeSliderValue;
} else {
$scope.firstRangeSliderValue = $scope.secondRangeSliderValue;
}
}
}
}]);
app.directive('dualSlidersDirective', function() {
return {
scope: {
sliderOneValue: '=',
sliderTwoValue: '=',
onSliderChange: '&'
},
template:
'<div>' +
'<table>' +
'<tr>' +
'<td>' +
'<input type="range" min="10" max="30" step="2"' +
'ng-model="sliderOneValue"' +
'ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheFirstSlider\'})">' +
'</td>' +
'<td>{{ sliderOneValue }}</td>' +
'</tr>' +
'<tr>' +
'<td>' +
'<input type="range" min="20" max="40" step="2" class="indented"' +
'ng-model="sliderTwoValue"' +
'ng-change="onSliderChange({drivenByWhichSlider: \'drivenByTheSecondSlider\'})">' +
'</td>' +
'<td>{{ sliderTwoValue }}</td>' +
'</tr>' +
'</table>' +
'</div>'
};
});
</script>
</head>
<body ng-controller='DualSlidersController'>
<dual-sliders-directive slider-one-value='firstRangeSliderValue' slider-two-value='secondRangeSliderValue' on-slider-change='reconcileSliders(drivenByWhichSlider)'></dual-sliders-directive>
</body>
</html>
I have an angular app, and an index.html with an ng-view that renders to different views partials/persons.html and partials/newPerson.html.
when i add a new person to the $scope.persons in my controller via the newPerson.html the $scope.persons is updated, but it dosn´t updated the table in the partials/persons.html. if i copy/paste the table into partials/newPerson.html the table is updated automatically. I cant seem to wrap my head around why? they are using the same controller...?
thank´s in advance for your help :)
js/app.js
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/persons',{
templateUrl:'partials/persons.html',
controller:'PersonCtrl'
})
.when('/newperson',{
templateUrl:'partials/newPerson.html',
controller:'PersonCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('PersonCtrl',['$scope', function($scope){
var persons = [
{
id: 1
,name: "Jens",
age : 18}
,{
id: 2,
name: "Peter",
age : 23
}
,{
id: 3
,name: "Hanne"
,age : 23
}
];
$scope.persons = persons;
$scope.nextId = 4;
$scope.savePerson = function(){
if($scope.newPerson.id === undefined)
{
$scope.newPerson.id= $scope.nextId++;
$scope.persons.push($scope.newPerson);
}else{
for (var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].id === $scope.newPerson.id){
$scope.persons[i] = $scope.newPerson;
break;
}
}
}
$scope.newPerson = {};
};
index.html
<html ng-app="app" ng-controller="PersonCtrl">
<head>
<title>Routing</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<script src="angularSrc/app.js"></script>
</head>
<body>
<br>
<div class="container">
<header>
<h1>People Routing</h1>
<nav>
persons
new person
</nav>
</header>
<div ng-view="ng-view">
</div>
</div>
</body>
partials/persons.html
<h3>Persons</h3>
<table >
<thead>
<tr>
<td>Id</td>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in persons">
<td>{{p.id}} </td>
<td>{{p.name}} </td>
<td>{{p.age}} </td>
</tr>
</tbody>
</table>
partials/newPerson.html
<div >
<h1>New person</h1>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<input type="text" ng-model="newPerson.name" model="newPerson.name" class="form-control" id="year" placeholder="name">
</div>
<div class="form-group">
<input type="number" ng-model="newPerson.age" model="newPerson.age" class="form-control" id="age" placeholder="age">
</div>
</fieldset>
</form>
<button type="submit" ng-click="savePerson()" >Save</button>
<h2>nextId: {{nextId}}</h2>
</div>
The problem is that you aren't realizing that each use of controller creates new instance.
The scope is destroyed when you leave a controller so if you add to the scope in one instance , that change will be lost when you load controller again on your other route.
You need to use a service to persist the data during the life of each page load.
Simple service example:
app.factory('PersonService', function () {
var persons = [{
id: 1,
name: "Jens",
age: 18
}, {
...
}, {
...
}];
return {
persons: persons
}
});
Then inject in controller and use the service data in controller
app.controller('PersonCtrl',['$scope','PersonService', function($scope,PersonService){
$scope.persons = PersonService.persons;
I have the following simple CRUD based code (most taken from the AwesomeTodo tutorial).
It's one html file, just a grid, and when create() is called, I expect the UI to update.
THIS APP WORKS! It just doesn't refresh the view when i create new records, I have to refresh the browser which obviously reloads the resource.
<div id="apps-table" compile="html">
<table ng-controller="AppCtrl" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>URL</th>
<th>Label</th>
<th>Description</th>
<th>Status</th>
<th>Location</th>
<th><a ng-click="promptForNew()"><li class="icon-plus"></li> New App</a></th>
</tr>
</thead>
<tbody>
<tr style="display:none" id="add-app-row">
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
<td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
<option value=1>Active</option>
<option value=0>Inactive</option>
</select>
</td>
<td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
<option value=0>Internal</option>
<option value=1>External</option>
</select></td>
<td>
<a ng-click="create()" id="save_new" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
</td>
</tr>
<tr ng-repeat="app in Apps.record" id="row_{{app.fields.id}}">
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.name"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.url"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.label"></td>
<td><input class="input-small" type="text" ng-change = "formChanged()" ng-model="app.fields.description"></td>
<td><select ng-model="app.fields.is_active" ng-change = "formChanged()">
<option value=1>Active</option>
<option value=0>Inactive</option>
</select>
</td>
<td><select ng-model="app.fields.is_url_external" ng-change = "formChanged()">
<option value=0>Internal</option>
<option value=1>External</option>
</select></td>
<td>
<a ng-click="save()" id="save_{{app.fields.id}}" class="btn btn-small btn-primary disabled" href=""><i class="icon-save"></i></a>
<a class="btn btn-small btn-danger" ng-click="delete()"><i class="icon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
var AdminApp = angular.module("AdminApp", ["ngResource"]).
config(function($routeProvider) {
$routeProvider.
when('/', { controller: AppCtrl, templateUrl: 'applications.html' }).
otherwise({ redirectTo: '/' });
});
AdminApp.factory('App', function($resource) {
return $resource('/rest/system/app/:id/?app_name=admin', {}, { update: { method: 'PUT'}});});
var AppCtrl = function ($scope, App) {
$scope.Apps = App.get();
$scope.formChanged = function(){
$('#save_' + this.app.fields.id).removeClass('disabled');
};
$scope.promptForNew = function(){
$('#add-app-row').show();
};
$scope.save = function () {
var records = {};
var record = {};
record.fields = this.app.fields;
delete record.fields.name;
records.record = record;
var id = this.app.fields.id;
App.update({id:id}, records, function () {
$('#save_' + id).addClass('disabled');
});
};
$scope.create = function() {
var currentScope = $scope;
var records = {};
var record = {};
record.fields = this.app.fields;
records.record = record;
App.save(records, function() {
$('#add-app-row').hide();
});
};
$scope.delete = function () {
var id = this.app.fields.id;
App.delete({ id: id }, function () {
$("#row_" + id).fadeOut();
});
};
};
Here is the index.html:
<!DOCTYPE html>
<html ng-app="AdminApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/lib/web-core/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="/lib/web-core/css/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
<script src="/lib/web-core/js/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/resource.js"></script>
<script src="/lib/web-core/js/jquery.js"></script>
<script src="/lib/web-core/js/bootstrap.min.js"></script>
</body>
</html>
All my actions are through ng-click, so I dont appear to be doing anything "outside Angular"
Question is, is this code working as it should? Or should it actually update?
Only way i can update scope is manually using :
$scope.Apps.record.push($scope.app);
thats hideous. Cant use apply or digest, nor should I have to.
Glancing through your code and the jsFiddle, I've come across the following issues so far:
The framework loading needs to be set to "no wrap (head)" instead of "onLoad" in the jsFiddle settings
The ngApp directive is not used anywhere to bootstrap the application
There is an ngController directive specifying the AppCtrl controller, but that controller isn't registered with the application module using module.controller (it's just a free-standing variable)
The controller functions invoked via ngClick use jQuery to manipulate the DOM--not only is this a big no-no in Angular (use directives, not controllers, for your DOM manipulation), but the jQuery library isn't even included in the jsFiddle.