angular js modal popup and grid not working together - angularjs

Below are my html and js code if i use the below angular js refrence 1.3.0 beta i am able to load the grid with data but my popup doesnt load, and if i try to remove the reference with other version my popup loads but grid dosent
popup.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<!--<script src="https://code.angularjs.org/1.5.1/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<script src="popup.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
<div class="container" ng-controller="TestCtrl" ng-init="firstCall()">
<h3>Angular Modal Service</h3>
<a class="btn btn-default" ng-app="app" ng-click="show()">Show a Modal</a>
<p>{{message}}</p>
<!-- The actual modal template, just a bit o bootstrap -->
<script type="text/ng-template" id="modal.html">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div>
<div>
Defect Area:
<select ng-model="details.DefectArea">
<option value="" disabled="disabled" selected="selected"></option>
<option value="Scheduler">Scheduler</option>
<option value="ShopApp">ShopApp</option>
<option value="Process Claims">Process Claims</option>
<option value="TR Workbench">TR Workbench</option>
<option value="QFC Workbench">QFC Workbench</option>
<option value="WS Workbench">WS Workbench</option>
<option value="SysAdmin">SysAdmin</option>
</select>
</div>
<hr />
<div>
Defect Summary:
<input type="text" style="height:28px;width:27%" ; placeholder="" ng-model="details.DefectSummary">
</div>
<hr />
<div>
Defect Details:
<input type="text" style="height:28px;width:50%" ;placeholder="" ng-model="details.DefectDetails">
</div>
<hr />
<input type="button" ng-click="SendData(details)" value="Add" />
</div>
</div>
</div>
</div>
</div>
</script>
<h4 style="color:blueviolet">{{value}}</h4>
<div class="table-responsive com-table">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th width="5%" style="background-color:cadetblue" ;>DefectArea</th>
<th width="15%" style="background-color:cadetblue" ;> DefectSummary</th>
<th width="15%" style="background-color:cadetblue" ;>DefectDetails</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="CU in DefectList" style="background-color:darkgray" ;>
<td width="5%"><span ng-bind=CU.DefectName></span></td>
<td width="15%"><span ng-bind=DefectSummary></span></td>
<td width="15%"><span ng-bind=CU.DefectDetails></span></td>
</tr>
</tbody>
</table>
<div class="collapse">
<div class="well">
</div>
</div>
</div>
<hr />
</div>
</body>
</html>
Popup.js
var app = angular.module('app', ['angularModalService']);
app.controller('TestCtrl', function ($scope, ModalService) {
$scope.show = function () {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function (modal) {
modal.element.modal();
modal.close.then(function (result) {
$scope.message = "You said " + result;
});
});
};
});
app.controller('ModalController', function ($scope, close) {
$scope.close = function (result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
var TestCtrl = function ($scope, $http) {
$scope.firstCall = function () {
$http({
url: "NewRoute/getDataForAngularGrid",
dataType: 'json',
method: 'GET',
data: '',
headers: {
"Content-Type": "application/json"
}
}).success(function (response) {
debugger;
$scope.DefectList = response;
})
.error(function (error) {
alert(error);
});
}
$scope.SendData = function (Data) {
var GetAll1 = new Object();
GetAll1.DefectName = Data.DefectArea;
GetAll1.DefectSummary = Data.DefectSummary;
GetAll1.DefectDetails = Data.DefectDetails;
$scope.IsToBeShown = true;
$http({
url: "NewRoute/firstCall",
dataType: 'json',
method: 'POST',
data: GetAll1,
headers: {
"Content-Type": "application/json"
}
}).success(function (response) {
$scope.value = response;
$scope.firstCall;
})
.error(function (error) {
alert(error);
});
}
};

Related

Angular JS page loading error

I am new to angular and I tried to create a application to add, update and delete information about the lab test. But when the page is loaded one error occurrs. If anybody knows the reason for this please help me. Thank you.
Error
enter image description here
ManageLabTest.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Lab Test Management</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dynatable/0.3.1/jquery.dynatable.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="../app.module.js"></script>
<script src="../Controller/LabController.js"></script>
<script src="../Controller/main.route.js"></script>
</head>
<body ng-controller="ManageLabTest">
<div id="page">
<div class="header"><img src="../img/logoPCU%20(2).jpg" height="174" width="721"/>
<h1 class="text-info">Lab Test Details Management</h1>
</div>
</div>
<div class="container">
<div class="navigation">
<div class="page-header">
</div>
<div class="well well-lg">
<div class="container-fluid">
<h3><strong>Lab Test Details</strong></h3>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="form-group">
<label>Patient ID </label>
<input type='text' class="form-control" ng-model="Test.patientID"/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Test Code</label>
<input type='text' class="form-control"ng-model="Test.testCode" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Test Name</label>
<input type='text' class="form-control" ng-model="Test.testName"/>
</div>
</div>
<div class="container">
<div class='col-md-3 '>
<div class="form-group">
<label>Type</label>
<select ng-model="Test.type" class="form-control">
<option>Select Type</option>
<option>Critical</option>
<option>Non-Critical</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Date</label>
<div ng-model="Prescription.date">{{date | date:'yyyy-MM-dd'}}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group pull-right" ng-submit="addNew()">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New"/>
<button class="btn btn-warning" id="clear" ng-click="clear()" onclick="enableAddButton()">
Clear
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-header">
<h3><strong>Add Lab Test</strong></h3>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="data-table2">
<tr>
<th> Patient ID </th>
<th> Type </th>
<th> Test Code </th>
<th> Test Name </th>
<th> Date</th>
<th> Edit </th>
<th> Delete</th>
</tr>
<tr ng-repeat="Test in Tests">
<td> {{Test.patientID}} </td>
<td> {{Test.type}} </td>
<td> {{Test.testCode}} </td>
<td> {{Test.testName}} </td>
<td> {{Test.date}} </td>
<td>
<button class="btn btn-warning btn-sm" ng-click="editLab(Test._id)"
onclick="enableUpdateButtons()">Edit <span
class="glyphicon glyphicon-pencil"></span></button>
</td>
<td>
<button class="btn btn-danger btn-sm" ng-click="deleteLab(Test._id)">Delete <span
class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group pull-right">
<button class="btn btn-success btn-sm" ng-click="" onclick="">Save/Send</button>
</div>
</div>
</div>
<div class="page-header">
<h3><strong>Lab Test Details</strong></h3>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="data-table">
<tr>
<th> Patient ID </th>
<th> Type </th>
<th> Test Code </th>
<th> Test Name </th>
<th> Date</th>
<th> Edit </th>
<th> Delete</th>
</tr>
<tr ng-repeat="Test in Tests">
<td> {{Test.patientID}} </td>
<td> {{Test.type}} </td>
<td> {{Test.testCode}} </td>
<td> {{Test.testName}} </td>
<td> {{Test.date}} </td>
<td>
<button class="btn btn-warning btn-sm" ng-click="editLab(Test._id)"
onclick="enableUpdateButtons()">Edit <span
class="glyphicon glyphicon-pencil"></span></button>
</td>
<td>
<button class="btn btn-danger btn-sm" ng-click="deleteLab(Test._id)">Delete <span
class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group pull-right">
<button class="btn btn-success btn-sm" ng-click="" onclick="">Save changers</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
LabController.js
'use strict';
angular.module('app').controller('ManageLabTest', ['$scope', function ($scope) {
getLab();
function getLab() {
$http.get('/').then(response => {
$scope.labs = labs;
$scope.lab = null;
});
};
$scope.clear=function(){
$scope.lab=null;
};
$scope.addLab = () => {
$http.post('/',$scope.lab).then(function(response){
getLab();
});
};
$scope.update = () =>{
$http.put('/'+$scope.lab._id,$scope.lab).then(function(response){
getLab();
clear();
});
};
$scope.edit = () =>{
$http.get('/'+id).then(function(response){
$scope.lab = response.data;
});
};
$scope.remove = () =>{
$http.delete('/'+id).then(function(response){
getLab();
});
};
$scope.Test = [];
$scope.addNew = function (Test) {
$scope.Test.push({
'patientID':"",
'testCode':"",
'testName':"",
'date':""
});
};
$scope.date = new Date();
}]);
Lab.model.js
'use strict';
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const LabTestSchema = new Schema({
patientID: {
type: String,
required: true
},
testCode: {
type: String,
required: true
},
testName: {
type: String,
required: true
},
date: {
type: Date,
required: true
},
type:{
type: String,
required: true
}
});
var LabTest = mongoose.model('LabTest', LabTestSchema);
module.exports = LabTest;
app.module.js
angular.module('app',['ngRoute']);
server.js
const bodyParser = require('body-parser'),
express = require('express'),
mongoose = require('mongoose');
mongoose.Promise = global.Promise;
require('./Interface/DataModel/prescription.model.js');
require('./Interface/DataModel/Lab.model.js');
const PresRouter = require('./Interface/Routers/Prescription.route.js');
const LabRouter = require('./Interface/Routers/Lab.route.js')
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'true'}));
mongoose.connect('mongodb://localhost:27017/PCU', err => {
if (err) {
console.log(err);
process.exit(1);
}
}
);
app.use(express.static(__dirname+'/Interface'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/Interface/Pres&Labs/ManageLabTest.html');
});
app.use('/',PresRouter);
app.use('/',LabRouter);
app.listen(3000, err => {
if (err) {
console.error(err);
return;
}
console.log('app listening on port 3000');
});
Lab.route.js
'use strict';
const express = require('express');
const mongoose = require('mongoose');
mongoose.set('debug', false);
const router = express.Router();
const LabModel = require('../DataModel/Lab.model.js');
router.get('/',function (req,res) {
LabModel.find().then(labs => {
res.json(labs);
}).catch(err => {
console.error(err);
res.sendStatus(500);
});
});
router.post('/',function (req,res) {
const lab = new LabModel(req.body);
labs.save().then(labs => {
res.json(labs);
}).catch(err => {
console.error(err);
res.sendStatus(500);
});
});
router.get('/:id',function (req,res) {
LabModel.findById(req.params.id).then(data=>{
res.json(data || {});
}).catch(err=>{
console.error(err);
res.sendStatus(500);
});
});
router.put('/:id',function (req,res) {
const data = req.body;
delete data._id;
const Id = req.params.id;
LabModel.findByIdAndUpdate(Id,{$set:data}).then(db=>{
res.json(data);
}).catch(err => {
console.error(err);
res.sendStatus(500);
});
});
router.delete('/:id',function (req,res) {
LabModel.findByIdAndRemove(req.params.id).then(data=>{
res.sendStatus(200,'success');
});
});
module.exports = router;
main.route.js
angular.module('app').config(['$routeProvider'],function ($routeProvider) {
$routeProvider
.when('/ManagePrescription',{
templateUrl : 'ManagePrescription.html',
controller : 'ManagePrescription'
})
.when('/ManageLabTest',{
templateUrl : 'ManageLabTest.html',
controller : 'ManageLabTest'
})
.when('SearchPrescription',{
templateUrl : 'SearchPrescription.html',
controller : 'ManagePrescription'
})
.when('SearchLabTest',{
templateUrl : 'SearchLabTest.html',
controller : 'ManageLabTest'
});
});

There is syntax error in main.route.js
you are defining your function out of Array..
angular.module('app').config(['$routeProvider'],function ($routeProvider) {
//YOUR LOGIC
});
The code should look like as below
angular.module('app').config(['$routeProvider',function ($routeProvider) {
//YOUR LOGIC
}]);

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 Stopped Working

I'm working on a test project with angular, but sudently it stopped working!
I don't changed anything in the project, but know if I enter on a list for e.g, where before I saw "description" now I see the tags {{obj.descrip}}!
It is happening with all my fields.
My browser console log doesn't show anything.
All my imports are correctly
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
My page
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page session="true"%>
<!doctype html>
<html data-ng-pp="caixaApp">
<head>
<title>Barattie ~ Soluções Integradas</title>
<link rel="icon"
href="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2015/May/27/3957014059-5-barattieproject-avatar.png">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name='robots' content='noindex,nofollow'/>
<script src="<c:url value='/resources/js/jquery-latest.min.js' />"></script>
<script src="<c:url value='/resources/js/angular.js' />"></script>
<script src="<c:url value='/resources/js/bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/ui-bootstrap.min.js' />"></script>
<script src="<c:url value='/resources/js/CaixaController.js' />"></script>
</head>
<body data-ng-controller="caixaCtrl">
<%# include file="/resources/html/menu_inc.jsp"%>
<alert data-ng-repeat="alert in alerts" type="alert.type" close="fecharAlert($index)">{{alert.msg}}</alert>
<section>
<button data-ng-click="abrir()" class="btn btn-sm btn-primary pull-right">Novo Registro</button>
</section>
<br/>
<table data-ng-table="tabela" class="table table-hover">
<thead>
<tr>
<th>Descrição</th>
<th>Saldo</th>
<th>Opções</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="caixa in caixas | orderBy: ['ativo','descricao']">
<td>
<span>{{caixa.descricao}}</span>
</td>
<td>
<span>{{caixa.saldo | currency}}</span>
</td>
<td>
<button data-ng-disabled="!caixa.ativo" data-ng-click="abrir(caixa.id)" class="btn btn-primary btn-xs">Alterar</button>
<button data-ng-click="manter(caixa.id, !caixa.ativo)" class="btn btn-default btn-xs">{{caixa.ativo ? 'Desativar' : 'Ativar'}}</button>
</td>
</tr>
</tbody>
</table>
<script type="text/ng-template" id="add_modal">
<div class="modal-header">
<h3>Caixas</h3>
</div>
<div class="modal-body">
<!--<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>-->
<form name="addForm" class="form-horizontal">
<input id="id" type="hidden" data-ng-model="caixa.id" />
<div class="control-group">
<label class="control-label" for="name">Descrição</label>
<div class="controls">
<input id="descricao" name="descricao" data-ng-model="caixa.descricao" type="text" placeholder="Ex. Caixa 01" class="input-xlarge" required="" ng-class="{error: caixa.descricao.$invalid && !caixa.descricao.$pristine}" required/>
</div>
</div>
<div class="control-group" ng-class="{error: caixa.saldo.$invalid && !caixa.saldo.$pristine}">
<label class="control-label" for="saldo">Saldo</label>
<div class="controls">
<input id="saldo" name="saldo" data-ng-model="caixa.saldo" type="text" placeholder="0.00" class="input-xlarge" required />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button ng-click="salvar()" ng-disabled="caixa.$invalid" class="btn btn-success"><i class="icon-white icon-plus"></i> Salvar</button>
<button ng-click="cancelar()" class="btn">Cancelar</button>
</div>
</script>
</body>
</html>
Controller
var app = angular.module('caixaApp', ['ui.bootstrap']);
app.controller('caixaCtrl',[ '$scope', '$http', '$modal', function($scope, $http, $modal) {
$http.defaults.headers.post['Content-Type'] = 'application/json';
$scope.alerts = [];
var urlBase='/sistem/';
function lista() {
$http.get(urlBase + 'caixas/consultar').success(function(data) {
$scope.caixas = data;
});
}
//Carrega a lista geral assim que o documento é iniciado
lista();
//Fecha a mensagem de alerta
$scope.fecharAlert = function(index) {
$scope.alerts.splice(index, 1);
};
// Abre a modal
$scope.abrir = function(caixaId) {
var modalInstance = $modal.open({
templateUrl: 'add_modal',
controller: modalCtrl,
resolve: {
id: function() {
return caixaId;
}
}
});
modalInstance.result.then(function () {
//Atualiza a lista apenas no metodo .close() do modal.
lista();
$scope.alerts.splice(0, 1);
$scope.alerts.push({
type: 'success',
msg: "Registro salvo"
});
});
};
//controller da modal
function modalCtrl($scope, $modalInstance, id) {
$scope.alerts = [];
$scope.caixa = {};
//Carrega o objeto no modal se for alteracao
if (angular.isDefined(id))
$http.post(urlBase + 'caixas/alterar/'+id).success(function(data) {
$scope.caixa = data;
});
//fecha o modal
$scope.cancelar = function() {
$modalInstance.dismiss('cancel');
};
// mantem o usuario
$scope.salvar = function() {
$http.post(urlBase + 'caixas/adicionar', $scope.caixa).success(function(data) {
$modalInstance.close();
});
};
}
//Ativa / Desativa o material
$scope.manter = function manter(id, manter) {
$http.post(urlBase + 'caixas/manter/'+id+'&'+manter).success(function(data) {
$scope.caixas = data;
$scope.alerts.splice(0, 1);
$scope.alerts.push({
type: 'success',
msg: "Manutenção realizada"
});
});
};
}]);

Your scripts should be at the bottom of the page.
Please put the CaixaController.js at the bottom of the page, just before the body closing tag. Hope that would resolve the issue.
UPDATED:
Please correct data-ng-pp="caixaApp" to data-ng-app="caixaApp". 'a' is missing. Hope this resolves the issue :)

Display Images in AngularJS Modal inside ng-repeat

here is the index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
ul>li, a{cursor: pointer;}
</style>
<title>get some data from the database</title>
</head>
<body ng-controller="delayController">
<div ng-controller="customersCrtl">
<div class="container">
<br/>
<blockquote><h4 dir="rtl" align="center">test</h4></blockquote>
<br/>
<div dir="rtl" class="row">
<div class="col-md-2">num of items per page:
<select ng-model="entryLimit" class="form-control">
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
<div class="col-md-3">search:
<input type="text" ng-model="search" ng-change="filter()" placeholder="enter what you are looking for" class="form-control" />
</div>
<div dir="rtl" class="col-md-4">
<h5>showing {{ filtered.length }} out of {{ totalItems}} items</h5>
</div>
</div>
<br/>
<div dir="rtl" align="center" class="alert alert-info" ng-show="loading"><img ng-src="images/131.gif"/><h2>loading details...</h2>
<div ng-controller="customersCrtl" class="container">
<progressbar class="progress-striped active" type="info" animate="true" max="100" value="progressBar.progress"><b>{{progressBar.progress}}%</b></progressbar>
</div>
</div>
<div class="row" dir="rtl">
<div dir="rtl" class="col-md-12" ng-show="filteredItems > 0">
<table align="right" dir="rtl" class="table table-striped table-bordered">
<thead>
<th>item name <a ng-click="sort_by('name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>item price <a ng-click="sort_by('price');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.name}}</td>
<td>{{data.price}}
<img src="images/binoculars.png" height="12" width="12"></td>
</tr>
</tbody>
</table>
</div>
<div dir="rtl" class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>לא נמצאו מוצרים.</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="דף קודם" next-text="דף הבא"></div>
</div>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-bootstrap-lightbox.js"></script>
<script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script src="js/angular-count-to.js"></script>
<script src="app/app.js"></script>
</body>
</html>
This is the app.js
var app = angular.module('myApp', ['ui.bootstrap','countTo']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http?|file|data):/);
}]);
app.controller('customersCrtl', function ($scope, $http, $timeout) {
$scope.$emit('LOAD');
$scope.progressBar = { progress : 0 };
$http.get('ajax/getCustomers.php').success(function(data){
$scope.list = data;
$scope.currentPage = 1; //current page
$scope.entryLimit = 50; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.$emit('UNLOAD');
});
(function progress(){
if($scope.progressBar.progress < 100){
$timeout(function(){
$scope.progressBar.progress += 1;
progress();
},100);
}
})();
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
app.controller('delayController',['$scope',function($scope){
$scope.$on('LOAD',function(){$scope.loading=true});
$scope.$on('UNLOAD',function(){$scope.loading=false});
}]);
As you can see, at the moment, the image is opened in a new tab/window and it looks a bit off. This is the reason for wanting it to be opened in a modal like window.

You can pass any controller to the bootstrap modal service as so.
Just create your controller and place your image data on its scope.
Then, pass it to the open call of the modal service.
http://plnkr.co/edit/8TfCPs?p=preview
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {
var parentScope = $scope;
$scope.imgs =[];
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/f00"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/0f0"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/00f"));
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.imgs = parentScope.imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
};
};
Now, as an addendum based on your comments, if you are using image data encoded in base64 you will need to build up the url using $sce.trustAsResourceUrl
https://docs.angularjs.org/api/ng/service/$sce
http://plnkr.co/edit/jRXHL3zSR8rDT1sJJ1tw?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<img ng-src="{{imgUri}}"/>
<script>
var app = angular.module("app",[]);
app.controller("testCtrl",function($scope,$sce){
var data="iVBORw0KGgoAAAANSUhEUgAAARIAAADyCAYAAACBBEoVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAABnySURBVHhe7Z2LlR21EkXJADIwGUAGOAPIwM6AyQBnwGTAZMBkgDMgBEIghHlrzxtBu9HtW5JKUqn77LXOwti370efo1JJrf7qRQghGpGRCCGakZEIIZqZbiR//vnny6dPn17ev3//qq+++uqfPz88PLz+uxAiNtOM5Lfffnv59ttvX43jnr7//vuXP/744+1KIUQ0hhvJX3/99WoMOcO4p48fP778/fffb+8khIjCUCNhmvLNN99kTcIqTEhmIkQshhmJh4kkkT8RQsRhmJF89913WVOo1c8///z2zkKI2QwxEhKrOTNoFfkWIcR8hhjJu3fvskbQqg8fPrx9ghBiJt2NhGXbnAl4iJyLEGI+3Y2EqCFnAl7ShjUh5tPdSH744YesAXjpl19+efskIcQsuhvJ119/nTUAL8lIhJhPdyPJdX5PKeEqxHyWNxJFJELMp7uReG9E20tGIsR8uhsJO1BzBuCl33///e2ThBCz6G4kdPScAXhJN/AJMZ/uRgK9drb++OOPb58ghJjJECPpda+NNqMJEYMhRgK6+1eI8zLMSLhT12tzGqak3IgQcRhmJMBUpNVMZCJCxGOokQAmUHv/DclVmYgQ8RhuJAkSsNbVHF7H64UQMZlmJAmmOyROiVKSsTD94f/5ez2GQoj4TDcSIcT6yEiEEM0sYyRMgR4fH19++umn1yf0iT6QzP78+fM/osx5pOr275CS3mJLWCNh38nT09Pr0/Vyj/ZU7qQczBgTwBi2z1u2Pjr1SOm9qC/eGwOS4VyHUEZCw+PB4ZZHeur4gGOSEVOedPBcGY4Sh3TzHfgufCfd2nA+whhJ6d4S3bD3JZjwduqXK7NowlyIXp6fn/WMosUJYySlp81f/VEUdLxkHLnyWVEYIFELpijWIoyR/Prrr9nGdaSrhcjJPCxTv9XFQIGpaBq0BmGMhAaTa1BHwnzODslK8gpXMI9bSpGKpj9xCZVszTWiI535BHmMlRUQRubcb7+qMFSMVatBsQhlJKUJV0aqM0HnYOqySrJ0pjBYjFZTnxiEMhKWdHON5khnCHcxEFYvFH3UidUfohQxj1BGUnNQ9Mp3BScDyf0uqVxEcnqqwBxCGQkdK9dAjrRinkQRSF8RoWjn81hCGQmUnu1K8m0lCMFlIGNEDgXTFv0JZySlG9PQCo2FEfLKS7izhGmTwBZ9CWckNY+uiDwvJhl8pt2nqwoT13SnH+GMhI6XawhHivpoCuVB4omNbZru+BPOSKD0yXzR8iSaxsQW5q7VHV9CGklNniQCjHSMeLnvJ8UTU05FJz6ENJKaG/hmz3/5fO1IXU+KTnwIaSQ1N/DNPOhIUcj6UnTSRkgjgdIn8nGfzmhoeMqFnEdElLp3p46wRsIJaLnKPtJIWF2SiZxPTHX0MLZywhpJ5DwJn6Nl3XNLm9jKCGskdNZcBR9pRJ5EN9ldR2yxFzbCGgnkKvdIPfMk5EO0Q/V6kpnYCG0kpQcdoR4oH3JtUfda0TkmtJHUHHTknXXn/ZQPkWQmx4Q2kpo8ieeB0DQcbTKTkmQmtwltJJCr0CN5PTiLBqPpjLSXzCRPeCMpzZMwDWlFJiIdSWbyX8IbyYw8CZn63PtKUpLM5EvCG8noPIlMRLJKZvIv4Y0EcpV4pNo8SU30I11bMpP/s4SRlB4IXZMnqTniUZIQZnJ1ljASjlLMVeCRSh6cpb0iUquuvgN2CSPp+eAsDEcmInko6tnBI1jCSJiD5iruljjLxLJyw/sSlubeQ5JqdNXT1pYwEijJk1iXf3UTnuQtotuSafVZWMZIrHkS65RGyVWpl66YfF3GSCx5EquJKLkq9dbMM4RnsIyR3MuTlFSc8iLSCI06sS8CyxgJ3MqTlBxoVLOULEk14s7xq2xWW8pIcibACo21smq220tSi66yJLyUkeTyJNblNsxGZ4tIM3SFKc5SRrLPk5TcU6P7aKRZusIqzlJGAul8EqY01vV6XrevXEkaqbOv4ixnJCmyKKmY9+/f/6diJWm0zrxRbTkjYQ8IqzdWtPFMiqIPHz68tcrzsZyRgHWVhtdp45kUSWdNvC5pJFaUYJWiiWn2GTmtkSgakaLqjHcIn9ZIFI1IUcV+prNxSiNRNCJFl/UG01U4pZGQHc9VniRF0dmiktMZyX73qyRF1ZlWcE5nJMqNSKvoTCs4pzIS5Uak1XSWqORURqJoRFpNXg+9n82pjETRiLSiznAPzmmMRPfUSKuq5AbUqJzGSCIeWsSRBzSSWyMOf88ceSsegM41hLzv3r3Lvu+VxfERlCsnj1FO7BJNZUeObE8qY17H69MxFJF0hqXgUxgJDSVXQaNFx8cI+D5e0BGItiJ2gFGiXDEB6/OKLFBHvGcUs15923xII8mNLEfM3IDGCMnnezbyW2AqfBafmfsuZ9OocuUzZpfr6knXcEZCpZYW6qwkK42v1PQ84DOJfM469WHacms62BPKlShllqGUtKVRJmsllJHQeDAFwngrhIS5SukpjG5GQ88xs+F7K0q5zjKUkvtv+H70lShmEsZIqLz04Crc1gqv3VdIL9GwIs5l6Xx0wtx3XkFEVp55JS9okyPLtSQSx0i4JoqZhDGS7QO9KSQro6Y1VHJJ6DkDOuNq0QnTmOjlSqQwqlytEdk2Eo9gJiGM5OPHj18UptVIRq3WkI9YBRrirScSRlLU6O4Wo8rV2tb2bZ9ofqYhTzcSCm5bIMjawHJP3vMUjT1iyH0PGtTIKV+p6JARciGljJjqWPODlN/+2plmMtVIbu1GtXbeng8Dx0QiZcVrSPPoSMJEok9l7tHbpK3kriVFMINpRnK0pd3SgWmMuWs95GUijBpPT08vDw8Pr7eMo+0OXP7M31H5nz59enl+fn670o9IkQmjraeJUL6Pj49flO8+Z8Zgw98zfaaMvQaHnuVqjchvLf+X5Bi9mGIkVOZRktTCkRG1qNVEuJaG3bJlH2PBgLw6XQQz8YpEeA/MoyUape1hLK3G3atcrQ8eP9rt7GmaFlyNJFUyPwKlUSI3UhzJQo9KbDERpmP8ztz7togG75FPmGkmHiZCGVAWJe3IIgwf066lRwIWk7RgzddQZqkfpug3ycts3I0k90NKZE02tYz4t1SyISiRGnju/TxFlNPaGXs0+nvCnFuNkAbvbSB70Z5qEuvUSY8dxpa69siBeU2D3Kc2uS9bIouR0DBz17aopkAxnt4NfCs+q2XJlMY52kxaVr0YLXsMGEdiUCg1bH5j7r1aZKlnGcmBLPNDCjl3ba3oXCXQ0EZEIbfEZ9cy0kxqIrxErxyYRUwtSkN+j069laWDexhYSx1tCWcklgL0rLTS0JuO2HPZ2Sq+Q+nImeC6o0RdqyjTlgY606STiP5KzcTToC2RuYeRtESMW8IZiWVnn2cnKNm1GsVEklrMBLxHUURnakngRTCRpFIz8Zzi8NkWcteWKKyRtHZyyw/zmjeTJCuhx6pMq1rNhPL22K1JWbaGyT2MrVWlZuI5yFki5dx1JbqskdBpctfVqKThR2zkSS05kwSNliXikvCcKQwm1JIATnjnvTzFwGU1a0wn9x41spRr63TKi3BGcg+MJnddqagAK16f2VMenTlBp+E3Y54Is6BeSYTz/xhwy/RlDybGyJ/7XVFUYtZee3Yo63v07m9WljOS3E1+NbJGI3Sq6I0c8R1bpjgziThlzMlq1l7bEzCke7SalhfuRtIy37ZECR5TDEJya6fz+LxRsoxg0cDQc78lopjiWGkdUBHvcY+W9kk/8MLdSFp+mKXgPCrI4vSwQsi9Fd/VkqCLxOgNZ62yrvJ55HxIpN+jJUK39DcroYzEshnNw0is83uvue5IWW/4isBK0UhSSVTCiJ97jxLdoyV/d1ojsYTmrRGCNZxbJTey10q5kkh7ckpkza9h6rnrS3SP0xpJyyhjqaDcdSWyTmtWHC2TrA19Jl4JyRkiD2jBY3pjiZ5z11kU2khaHJJrj/BofNZO5rFJa5Ysc+vZtESuEWSN+nLXluhen4DcdRZ5ToNDGck992157yRrfiR37UqKnnT1yHXNlHUpuHXDmMVIaj/Dkkqw4m4kLVHDPTyMxILH58xW9OlN7juvJOto3hrZWuqx1pRDGwnkvvQ9WZKgrR3cupvVa9PbTEVevTmDUVvzC61TOEtnr03qhjeSmmUvS8W0NkBrkmzl/EiSZyLNm5UT2UnWZeARRlL7GZ5Ra5GRMC/kngO2NHsvjVoa/ohKgdpQMZIiG0lrPUaRhVbTtLRZb2Omb2/Pd7VQZCQe6+K3ZCkwGYldMpL+stAaRVvabO+pooUiI+nZACwF1vr5ls+AFTei5RSVnu1opCwrY62d3DIgsBKZu9ZLFsIYiWU5bZSR5K5dTZEjkhVvPcgpipFA7loPmT//7b8mehoJBX6PUUbicY/EbGlq018WZCQZei6LWnYKjjISCi93/UqSkfSXhdZEqLUee7XZLkbSM6ljobUBWu+zOYORWH/rDM6wT8d682drm51tJNb9SCGMxHoI86hK6bk6NUrW6GsGPQekUbK2pdXbrLUdhTAS601moyrlDBumrPeCzCL3nVeSdaRu7eCjDOuWljISZIEOTsGi2huVLHjcZTxb0W/aa72ZbbZoixZoq7nrj0TZcB3TU/qchV67sbsYSc8OVtPwa857sN792+PB0KNkvadoJr1G0FGyttfSoyTZUVpzMFWvQ6KshllkJJD7MA9Znbf1xHFrwazc0K1h90x6b6LqKatRYwi560tkPSM2d62HrP0yjJGYnS9zbYmsqxkrT2+iT2sSq0Z91s7tkQqwdOSebXU5I7HOxWrmnFuVnB624g5M6x3OEWDwyP2GyGLZ1zr18IhqLVNxD8O6pW5G0itJZu0ArUaCrHmSFaOSVaIRoEOutou4ZNrokbew0HNfjrU9FRuJR0fOife14LFeXtIYPD5vlCJvQrvFSrmokmjEYxCy5mJ6lqGVMEaCLHgUGnf3WqHhrDCXL2nk0egV5XrLmhsBj3ZqHVxn90koNpKeI7SlI3jNB0s2bPWcg3op+ga0Ixi9o09xrJ064fEEQczIQq+lX2Sl2EgsTlvbKCyJHa+8BcvIJfQMH1tVMlUr4fPnz1n1yMPU7AkaJSLSkmjPK4k8aiXzSFaKjYTOTojHf5NyDSv3pe5pdMFZjGtLxLNcS0fKI56fn1+P17Me7MRIyFF8XsYScRWHQdGanAcMx+t5xpbPrR1Y9304ib9n0ETW/gjFRmIl9+XvyRrKec0JS6MSGkmk+TzfxSMv8vT01Nz4OcvXw1AimUmpiYBn5GqBzp+79p64zpNuRlLT4ayjq+f+jhLXhShm4mEiHgay18PDQ/P3imAmNSbC7/Y6ppP6tVC79OsxAG3pZiQ1UYN1s1ht4eVERyotVF4/c7MaU6yWhsC1rbcaHIl6LO2EezCTWQlYOnFNdOW5EGFdyq/9TG9CGQmyQCPNXVur2mTljASsdfp3C0zEOwrJiZG5dapDPY9eeq8tX+9kMYOlhZ79rIRuRlLrlNaRLHdti2qXT/m+XjmbIzFKesxre0YiexGZtEROwPV07t7RCXVYW74YpveTB6z9oPZzvelmJLWjtTVn4d15W0dQGmEPQ8FASvM4t/AMva2yTlfvkQwl9xktIuJp3YPjbc6YpgXKJHf9PVnzLyWEMxJraNmjUXk0esyIDktl5T7DIho3c2TPzPrMBCYrOl7QefgtLUvxdFTqyDrqH9GjHVrvO6udTjHgeRPOSKw/kk6Wu75Vno0eU6GyKQt+F9rO+WnQ6e95DfNij8a9Z6aJJHlFVVswFdoBZUfnoxy3Br4tX4yZ7+BZvr3K1Zof6d3HSuhmJLUdnSmGlV7zZk8zmU0EE0nqYSaz6FmuVrPDEHLX39MljARZcxU9l2DPYCaRTCTpDGbSs1yJWK3krreodpXyiJBGYm1svTsKZkL4vCIRTSTJ+oT7iPDdc7/JS9b9Iy39iymRNyGNxJpsqs1al8hjc9VoMMDcb4kk7ulZyaT5rnzn3G/xlHUFqTY/gpYyEjpf7kdYZW1kLdl7q8jbrBCSMyXE+HK/IaLYGMeAEx3a8ohNfMja7lvqeSkjgdyPsCrK9GaryFMdRjLvTVGj5HF/Ti96T2W2skbiDBi5663qYd5hjSTS9GYrOmukOT6NakTI3VuUKzcRRqHHDY33ZJ3WtN5rdikjQZGmN3vRyGY2fMpm5Gg5SrPLlU428jaCJOtuVmht75czkojTm71GN3wiEKZYq05jrBpZrpgynzUzv2RdrfGIwHssHnQ1kv2GMdbI007DpKO9INbpDfTanGYVHZu5fo9KwjxmN/RZ6lmunAgXxZStUcLRoElf2vev/a0aJftUSuhqJFYoxFtGYKVlOcxbNEzyFkw90jmnVugwvP7x8fG1kV/RPG6JKIUySeVaYi6YMcaBKUUr05LOfWtaY43eexHCSIBGkTMTawKqNZMtrS3yGnutMv2z3ltza1oz20QgjJEAZrAPxaxzR5iRdJWkVlkXFfbTGgbeHlO+GkIZCVCoWzNhVLHCFGlb0JIUXbUDZSQTgXBGktgmYUuWq7a36UtSdBGFW0nXRDMRCGskkE70KrlbceZSsCSVqGRVklwh1xCtW6dCIwltJIAxkGUvQVGJtIJKIm0i9KgmAuGNBEoKHBSVSNHFHo8SWNmJaiKwhJHUoKhEiqzSwTE6pzUSRSVSVJVGIytwWiOBFaMS5sKEsfv9NNK/ol7Zydx6F+wsnS0agVMbyYpRyXa0YokPY7l1+8DVRNlQp4m0krGSSvaNrMSpjQRofLkKjaw9JNnoQFeMUjBRlv9z+y0i3V9lVcm+kZU4vZEwqucqNLKONhvxb3SsMyeTMQ9G7nv3Wa02SPQ44jAKpzcSSBvbVtE2fD8imcoZIhXMgw1a/HbrMmfufaIK44+8fNvKJYyEClwpz1AzjyZkphPSGVf5rXQujLAm+bhapGm9i31VLmEksFKGn3M3WknGgilFiViYimAcdKrW0Xml+twm0M/KZYwEVppT9wiDGfkxF+bqlEUvgyHS4P35HD7vKOdTyypHRhAdnjXBuuVSRkKF5io7orahMH/mOAVOB+OUL2+T4f0wGcRIjwEk0WExhSQinO2/p+uQJ3yn7Ylm+/c/26FFq3MpIwEaf67Co4kpQCJngHSudOTgWSBy4YhJTjfb/97tqL7KgEDEdxUuZySwwioHo/+Wo+XedEYsnXClMJqog0Ot7x3AzPRgC9Ol3OuiqceULiqXNBLC5FzFR9MWphS51+SUDkmmk0Yylv10Jffdc9qbaklZzBKR75W4pJEAeYfom7q2eYGWUXiWsfBZHie37zslvyf3uggiesLovPNY0bmskSTooFENZduBvPMC5CHo4JgLeZYWg+Fa3oP3Im/jfYL71lC9y8FLGAj1dTUDSVzeSBIYCiF0rpHMUkmexEuM9ulxDig9nwfx5+2/jYoMtp0zWn6EOmFl5qoGkpCR7GD0i2IojOpbVtk74an9ykeU/Aht5Oy7VUuQkdyAEJpGO3u7+Tbzv9JuTi9RB1tm50f4PldajbEiI7kDIevMPMp2QxMNOPeaM4uyT8zKj1D3V85/WJCRFEBHHh2lMJ3ZknvNmbVNAo/Oj1DXmr7YkJFUQqMekbPY50miJYR7ar8RjY6de52nyMlQt4o+ypCRNEKDY/rRc7fsdk5OiJ17zRm1j8Z65UeYunBLwjb6EWXISByhIfYwlW2ehFA795ozavu7vfMjyTyUOPVBRtIJT1PZjsxEQLnXnFHbTu6RH6EuqBOZhz8ykgGklR8MoSZRu8+TzFpBGq0tNfkRypoyxzw0bemLjKQCGiY7PWtHNja9kesoSZxuP2tEkne29rt6rfkRrqNst9vqS2CrP3VLGSvhakdGUgENLE1ZiBbSDXG1Dc9iLNt8AX/OveZMojwSR/mRZBzkjmrKn2uou+1RBkQymv6UISOphIaWm6ZwlyvngrQ0RIwFsyCcT+ayzZPw7/vPPZu2+zdSfiRNVVoiDqBubh2gJBOpQ0bSwC0zSSIc5w5bbqX3Jvd5Z9I2uiAiac1xUAdEHUdTJJlIPTKSRu6ZSRJhM3fPep0J0nPfymyRTG6FMqasKfPcZ+wlE2lDRuKA1Uy2YgqUopUaYxmxy3OWttO4EqgHEqWlhyjJRNqRkThRYyZbEXKnc1ctBzqTJ8i9zxm0TbTeAvPFhDGOXK7DKpmIDzISR1rNZK9kLnQWwnQMJuUOzpxw3SZSKdO0JEsEh2mk1ZVWyUT8kJE4420mUh/JRHyRkXRAZhJbMhF/ZCSdYApy5pWVVUWdeKyaiS+RkXQEMznz6spq0rb3fshIBsDOTE115mp7i4HwR0YyCMLpo3tppD5iKqN8SH9kJINRdDJGlLFlP4rwQUYyAeVO+orITwnVschIJsLGK63s+Il7dHTq+xxkJAEgEajpTpuYxmhFZh4ykiBoulMnlnQ1jZmPjCQYdAo6R67TSP+KPEjL4UbCFxlJUOgkilD+KxlITGQkwSFC4fkrV8+hYKoykLjISBaCPShX2tTGihaJaCVR4yMjWRCiFDrYGZeOk3kogboWMpLFYfs3U5+VH5ol81gfGcmJwFTYT7FCpMIUTeZxHmQkJ4W8Ars8MRY67eyIhe/Ad6l9kJWIjYzkYhC1sPpBp0bsWaGTt64KYVS8D+/H+xJt8DmKOK6BjER8AR0fA0CYQTKcvYgsZBQiISMRQjQjIxFCNCMjEUI0IyMRQjQjIxFCNCMjEUI0IyMRQjQjIxFCNCMjEUI0IyMRQjQjIxFCNCMjEUI0IyMRQjQjIxFCNCMjEUI0IyMRQjQjIxFCNCMjEUI0IyMRQjTy8vI/wdnsdUbByAAAAAAASUVORK5CYII=";
$scope.imgUri = $sce.trustAsResourceUrl("data:image/png;base64," + data);
});
angular.bootstrap(document,[app.name]);
</script>
</body>
</html>

You can use ng-src Use:
<img ng-src="data.imagedata" alt="Description"/>

Modal Angular ng repeat

I trying to do a modal that show events in a table but when i do the ng-repeat only show one item and i don't know why.
If someone can help me i will be very grateful,
The html is the following:
<!DOCTYPE html>
<html lang="en" ng-app="dashboard">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>LiftEye</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="../controllers/dashboardController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/angular-tablescroll.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-resource.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="dashboardController">
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<div id="page-wrapper" >
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Operación</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row" >
<div class="col-lg-8 col-md-8">
<div class="panel " STYLE="background-color: #eaeaea">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9 text-right">
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- /.panel -->
<div class="panel panel-default" >
<div class="panel-heading">
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="row">
<div class="col-lg-3">
<div >
<table class="table table-bordered table-hover table-striped dataTable no-footer" data-sort-name="name" data-sort-order="desc">
<tr role = "row" class="info text-center">
<th ng-click="order('msisdn')">Número Teléfono</th>
<th ng-click="order('icc')">ICC</th>
<th ng-click="order('imei')">IMEI</th>
<!--th>IMEI</th-->
<th ng-click="order('ActivationStatus')">Estado</th>
<th ng-click="order('sitename')">Instalación</th>
<th ng-click="order('siteaddress')">Dirección</th>
<th ng-click="order('sitecity')">Ciudad</th>
<th ng-click="order('sitezip')">Código Postal</th>
<th ng-click="order('phonedesc')">Modelo Teléfono</th>
<th ng-click="order('ContractingMode')">VBP</th>
</tr>
<tr class=" text-center" ng-repeat-start="object in objects | filter:searchText | filter:tableFilter | orderBy:predicate:reverse" ng-click="main.activeRow = object.icc" >
<td>{{object.msisdn}}</td>
<td>{{object.icc}}</td>
<td>{{object.imei}}</td>
<td>{{object.ActivationStatus}}</td>
<td>{{object.sitename}}</td>
<td>{{object.siteaddress}}</td>
<td>{{object.sitecity}}</td>
<td>{{object.sitezip}}</td>
<td>{{object.phonedesc}}</td>
<td>{{ object.ContractingMode ? 'Yes': 'No'}}</td>
</tr>
<tr ng-repeat-end ng-show="main.activeRow==object.icc">
<td colspan="3"> <a>Fecha Activación:</a> <div> {{object.DateActivation}}</div> <div><a> Fecha Baja</a> {{object.DateDisconnection}}</div> <div><a> Último Evento HW</a> {{object.LastHWEvent}}</div></td>
<td colspan="4"> <a>Último Evento Humano:</a> <div> {{object.LastHumanEvent}}</div> <div><a> Último Evento Test</a> {{object.LastTestEvent}}</div> <a>Comentarios:</a> <div> {{object.comments}}</div> </td>
<td colspan="2"> <div><a> Rae1: </a> {{object.rae1}}</div> <div><a> Rae2: </a> {{object.rae2}}</div> <a>Pin1:</a> <div> {{object.pin1}}</div> <div><a> Pin2: </a> {{object.pin2}}</div></td>
<td colspan="1"> <div> <button class="btn btn-info" ng-click="open(object)">Eventos</button></div> </td>
<div >
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Eventos</h3>
</div>
<div class="modal-body" >
<table class="table" ng-tablescroll="options">
<thead>
<tr>
<th >Fecha</th>
<th >Tipo Evento</th>
<th >Origen Evento</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="evento in eventos | limitTo:5">
<td>{{evento.eventtime}}</td>
<td>{{evento.eventtype}}</td>
<td>{{evento.parenttype}}</td>
</tr></tbody></table>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</tr>
</table>
</div>
<!-- /.table-responsive -->
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
</div>
</body>
</html>
And the controller is the following. The modal is inside a table with parent child.
var app =angular.module('dashboard',['ui.bootstrap']);
app.controller('dashboardController', function($scope, $http,$modal ){
$scope.objects=[{}];
$scope.objects={};
$scope.objects=[];
$scope.grupos =[{}];
$scope.longitud =[{}];
$scope.eventos =[{}];
var URLEvents = "/api/events/";
//Abrimos modal y les pasamos los eventos de esa instalación
$scope.open = function (object) {
$http.get(URLEvents + object.liftsiteid, $scope)
.success(function (data) {
var events = data;
angular.forEach(events, function(event) {
$scope.eventos = event;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
resolve: {
items: function () {
return $scope.eventos;
}
}
});
})
})
.error(function (data) {
window.alert('Something Wrong...');
});
};
var URLOperation ="/api/sites";
//Funci?n que devuelve las instalaciones de un usuario
$http.get(URLOperation, $scope)
.success(function(data) {
var groups = data;
angular.forEach(groups, function(group) {
var group2 = group;
angular.forEach(group2.sites, function(group3){
$scope.longitud.push(group3);
$scope.objects.push(group3);
$scope.predicate = 'msisdn';
$scope.reverse = true;
$scope.order = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
})
});
})
.error(function(data) {
window.alert('Something Wrong...');
});
});
//Abrimos el modal y le enviamos los eventos
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, $anchorScroll){
$anchorScroll();
$scope.eventos =[{}];
$scope.eventos.push(items);
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});

You're providing a lot of code - do you have the same issue for all of your lists and tables?
My first guess would be the initialization of the arrays:
$scope.grupos =[{}];
Try setting an empty array instead of an array with the first element being empty:
$scope.grupos = [];
Since you push new elements into the arrays when receiving your data, the first empty item will always be stuck in the data and might lead to your issues.
Another issue is in getting the "eventos": $scope.eventos = event;
I think this should be a push instead: $scope.eventos.push(event);
No offense - maybe you should try to get a better understanding of these basic concepts in Javascript (you're already using most of them correctly, but some look kind of mixed up):
Object initialization: var obj = {}; - this would be an empty object with no properties.
Array initialization: var arr = []; - this would be an empty array with no elements.
Therefore var x = [{}] will result in x being an array with an empty object.

You're trying to open one modal per event rather than one modal for all of the events.
Try replacing:
var events = data;
angular.forEach(events, function(event) {
$scope.eventos = event;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
resolve: {
items: function () {
return $scope.eventos;
}
}
});
})
with
$scope.eventos = data;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'lg',
resolve: {
items: function () {
return $scope.eventos;
}
}
});
and replace your modal instance with:
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items, $anchorScroll){
$anchorScroll();
$scope.eventos = items;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});

Resources