We Keep Coding

get data from modal and display it in a parent controller table

I would like to know how we can pass the data from modal and display them in a main controller table. On click of generate button in modal am getting input text data and displaying it in the table. But table is not updated with the data. Here is my plunkr- https://plnkr.co/edit/yk4Zcl6LF79cw4msYUrw?p=preview
// Code goes here
var myTable = angular.module('myTable', ['ui.bootstrap']);
myTable.controller('tableCtrl', function($scope, $http, $uibModal) {
$scope.Catalogs = [];
$scope.phNumber = [];
$scope.schema=[{"value":"2.0"},{"value":"2.2"}];
$scope.revision=[{"value":"ARev"},{"value":"XRev"}];
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/component_type',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.components = data;
/*for(var i = 0; i< data.length; i++) {
$scope.components = data[i].description;
//alert(data[i].description + components);
}*/
}
);
// rest call to get System Models
$http({ method:'GET',
url: 'http://100.96.16.175:8080/CGSDataManager/webapi/platform_info',
headers: {'Accept': 'application/json'}
}).
success(
function (data) {
$scope.systems = data
for(var i = 0; i< data.length; i++) {
phNumber = data[i].platform_id;
}
}
);
$scope.change = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
templateUrl : 'modalView1.html',
controller : 'ModalInstanceCtrl',
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy({schema:$scope.schema, revision:$scope.revision, components:$scope.components, systems:$scope.systems, phNumber:$scope.phNumber, Catalogs:$scope.Catalogs}); // pass name to Dialog
}
var modalInstance = $uibModal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
});
myTable.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, item) {
$scope.item = item;
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.submitData = function() {
$scope.item.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
$uibModalInstance.dismiss('submit');
};
});
// modal code
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" data-ng-click="cancel()">×</button>
<h4 style="color: #0085C3;" ><b style="font-size:14px;">Filter</b></h4>
</div>
<div class="modal-body" name="modalData">
<div class="row">
<div class="col-md-12 ">
<form>
Catalog Name: <input type="text" data-ng-model="catalogName"/>
</form>
</div>
</div>
<div class="row" >
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Schema</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="sc in item.schema">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="sc.selected" data-ng-true-value="'{{sc.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{sc.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size: 12px">Revision</span>
<table class="table table-striped">
<tbody>
<tr data-ng-repeat="re in item.revision">
<td style="padding-top: 2px; padding-bottom: 4px;"><input type="checkbox" data-ng-model="re.selected" data-ng-true-value="'{{re.value}}'" data-ng-false-value="''"> <span style="font-size: 10px; color: #000000; padding-top: 2px; padding-bottom: 4px;">{{re.value}}</span></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3 dell-bannercolor line">
<span style="font-size:12px">Component Type</span>
<div style="height:180px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat="x in item.components">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="x.selected" data-ng-true-value="'{{x.description}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{x.description}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-3 dell-bannercolor">
<span style="font-size:12px">System Model</span>
<br/>
<div style="height:150px; overflow:auto;">
<table class = "table table-striped" >
<tbody>
<tr data-ng-repeat = "y in item.systems">
<td style=" padding-top:2px; padding-bottom:4px;"><input type="checkbox" data-ng-model="y.selected" data-ng-true-value="'{{y.platform_id}}'" data-ng-false-value="''"> <span style="font-size:10px; color:#000000; padding-top:2px; padding-bottom:4px;">{{y.model}}</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" data-ng-click="cancel()">Cancel</button>
<button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="submitData()">Generate</button>
</div>
// html code
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="script.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<style>
.dell-bannercolor {
color: #0085C3;
}
//
adding this code for vertical line -- start
.line {
position: relative;
}
.line:after {
content: '';
position: absolute;
right: 0;
border-right: 1px solid #cfc7c0;
top: 10%;
bottom: 10%;
}
//
end
</style>
</head>
<body ng-app="myTable" ng-controller="tableCtrl">
<div class="containter">
<div class="jumbotron">
<h1>JSON to Table</h1>
</div>
<div >
<div id="table1Div" style="background:white;position absolute;">
<table class="table table-hover table-bordered" id="peopleTable">
<tbody>
<tr>
<th>Catalog Name</th>
<th>Validation</th>
<th>publishing</th>
</tr>
<tr data-ng-repeat="catalog in Catalogs">
<td>{{catalog.name}}</td>
<td>{{catalog.validation}}</td>
<td>{{catalog.publishing}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="change()">Clone</button>
</div>
</div>
</div>
</body>
</html>

See this https://plnkr.co/edit/hxdkNBvccYDie1tiigZy?p=preview
you Need to pass it while closing modal and get in controller
$uibModalInstance.dismiss($scope.item.Catalogs);

you can use $rootScope
myTable.controller('tableCtrl', function($scope, $rootScope,$http, $uibModal) {
$rootScope.Catalogs = [];
})
in another controller just push into catalogs not into item.catalogs
myTable.controller('ModalInstanceCtrl', function ($scope,$rootScope, $uibModalInstance, item) {
$scope.submitData = function() {
$rootScope.Catalogs.push({name: $scope.catalogName,validation: "true", publishing: "hello"});
}
});

How to use Multiplication with numbers and variables in JavaScript

"use strict";
var red_id = document.getElementsByClassName("btn btn-danger btn-lg btn-block betButton")[0];
var green_id = document.getElementsByClassName("btn btn-success btn-lg btn-block betButton")[0];
var black_id = document.getElementsByClassName("btn btn-inverse btn-lg btn-block betButton")[0];
document.getElementById('betAmount').value = 'NaN';
red_id.id = 'red';
green_id.id = 'green';
black_id.id = 'black';
setInterval(automated, 40000);
function automated() {
var roll_history = $('#past')[0].childNodes[9].textContent;
var roll_hisLast = $('#past')[0].childNodes[8].textContent;
var red_button = document.getElementById('red');
var black_button = document.getElementById('black');
var base_bet = 1;
function thisRoll(roll_history) {
var this_roll;
if (roll_history === 0) {
this_roll = 'green';
} else if ((roll_history >= 1) && (roll_history <= 7)) {
this_roll = 'red';
} else if ((roll_history >= 8) && (roll_history <= 14)) {
this_roll = 'black';
}
return this_roll;
}
var thisRoll = thisRoll(roll_history);
console.log(thisRoll);
function LastRoll(roll_hisLast) {
var last_roll;
if (roll_hisLast === 0) {
last_roll = 'green';
} else if ((roll_hisLast >= 1) && (roll_hisLast <= 7)) {
last_roll = 'red';
} else if ((roll_hisLast >= 8) && (roll_hisLast <= 14)) {
last_roll = 'black';
}
return last_roll;
}
var lastRoll = LastRoll(roll_hisLast);
console.log(LastRoll);
function compare(thisRoll, lastRoll) {
var win_lose;
if (thisRoll !== lastRoll) {
win_lose = 'lose';
} else {
win_lose = 'win';
}
return win_lose;
}
var winLose = compare(thisRoll, lastRoll);
console.log(winLose);
var input_last = document.getElementById('betAmount').value;
function betInputLast(input_last) {
var last;
last = input_last;
return last;
}
var lastXX = betInputLast(input_last);
console.log(lastXX);
function betInputLastX(lastXX) {
var fix_X;
if (isNaN(lastXX)) {
fix_X = base_bet;
}
return fix_X;
}
var lastX = betInputLastX(X);
console.log(lastX);
function betInput(winLose) {
var x;
if (winLose === 'win') {
x = base_bet;
} else if (winLose === 'lose') {
x = lastX * 2;
}
return x;
}
var X = betInput(winLose);
console.log(X);
var bet_input = document.getElementById('betAmount').value = X;
function bet(thisRoll, X) {
var log;
if (thisRoll === 'red') {
red_button.click();
log = 'Betting ' + X + ' on red';
} else if (thisRoll === 'black') {
black_button.click();
log = 'Betiing ' + X + ' on black';
}
return log;
}
var Log = bet(thisRoll, X);
console.log(Log);
}
<div class="roulette"><div class="well text-center" style="margin-bottom:10px;margin-top:25px; padding: 20px;">
<div class="progress text-center" style="height:50px;margin-bottom:10px;">
<span id="banner">Rolling in 24.93...</span>
<div class="progress-bar progress-bar-danger" id="counter" style="width: 83.1432%; overflow: hidden;"></div>
</div>
<div id="case" style="margin-bottom: 15px; background-position: -208px 0px;">
<div id="pointer"></div>
</div>
<div id="past">
<div data-rollid="696912" class="ball ball-0">0</div>
<div data-rollid="696913" class="ball ball-8">9</div>
<div data-rollid="696914" class="ball ball-1">5</div>
<div data-rollid="696915" class="ball ball-1">3</div>
<div data-rollid="696916" class="ball ball-1">6</div>
<div data-rollid="696917" class="ball ball-8">14</div>
<div data-rollid="696918" class="ball ball-1">3</div>
<div data-rollid="696919" class="ball ball-8">11</div>
<div data-rollid="696920" class="ball ball-8">10</div>
<div data-rollid="696921" class="ball ball-0">0</div>
</div>
<div style="margin: 20px 0px;">
</div>
<div class="form-group">
<div class="input-btn bet-buttons">
<span class="balance">
<span>Balance: </span>
<span id="dongers_r"></span>
<span id="balance_r" class="">15020</span> <i style="cursor:pointer; margin-left: 5px;" class="fa fa-refresh noselect" id="getbal_r"></i>
</span>
<input type="text" class="form-control input-lg" placeholder="Bet amount..." id="betAmount">
<button type="button" class="btn btn-danger betshort" data-action="clear">Clear</button>
<button type="button" class="btn btn-default betshort" data-action="10">+10</button>
<button type="button" class="btn btn-default betshort" data-action="100">+100</button>
<button type="button" class="btn btn-default betshort" data-action="1000">+1000</button>
<button type="button" class="btn btn-default betshort" data-action="half">1/2</button>
<button type="button" class="btn btn-default betshort" data-action="double">x2</button>
<button type="button" class="btn btn-primary betshort" data-action="max">Max</button>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-xs-4 betBlock" style="padding-right:0px">
<div class="panel panel-default bet-panel" id="panel11-7-b">
<div class="panel-heading">
<button class="btn btn-danger btn-lg btn-block betButton" data-lower="1" data-upper="7"><span> 1 to 7</span><span></span></button>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel1-7-m">
<div class="panel-body" style="padding:0px">
<div class="my-row">
<div class="text-center"><span class="mytotal">0</span></div>
</div>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel1-7-t">
<div class="panel-body" style="padding:0px">
<div class="total-row">
<div class="text-center">Total bet: <span class="total">24485</span></div>
</div>
</div>
</div>
</div>
<div class="col-xs-4 betBlock">
<div class="panel panel-default bet-panel" id="panel0-0-b">
<div class="panel-heading">
<button class="btn btn-success btn-lg btn-block betButton" data-lower="0" data-upper="0">0</button>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel0-0-m">
<div class="panel-body" style="padding:0px">
<div class="my-row">
<div class="text-center"><span class="mytotal">0</span></div>
</div>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel0-0-t">
<div class="panel-body" style="padding:0px">
<div class="total-row">
<div class="text-center">Total bet: <span class="total">13780</span></div>
</div>
</div>
</div>
</div>
<div class="col-xs-4 betBlock" style="padding-left:0px">
<div class="panel panel-default bet-panel" id="panel8-14-b">
<div class="panel-heading">
<button class="btn btn-inverse btn-lg btn-block betButton" data-lower="8" data-upper="14"><span> 8 to 14</span><span></span></button>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel8-14-m">
<div class="panel-body" style="padding:0px">
<div class="my-row">
<div class="text-center"><span class="mytotal">0</span></div>
</div>
</div>
</div>
<div class="panel panel-default bet-panel" id="panel8-14-t">
<div class="panel-body" style="padding:0px">
<div class="total-row">
<div class="text-center">Total bet: <span class="total">6572</span></div>
</div>
</div>
</div>
</div>
</div></div>
The function that dosen't work is function betInput(winLose) that have to multiply with 2 if winLose = 'lose' it happens first time but after that the output is only 2, were it should be multiplyed with 2.
I know this is peace of cake but i can't seem to figure it out.

I think there are a few problems here. I'm not totally sure what you are shooting for but these things might help.
I think you my have some scope issues here. The function automated gets called every so often on a timer. Each time that function is called all of the variables that are defined within automated using var statements are fresh, new variables. Consider defining lastX and X before the definition of automated. This way those values will be remembered for each successive call to automated.
Next consider the function betInputLastX. The only case that is covered is the initial case where the parameter value is NaN. I think that there should be an else branch that would assign X to fix_X. If this is not done the fix_X value is returned as undefined, and not useful in successive functions.
With these changes the output will give a sequence that looks some thing like NaN, 2, 4, 8, 16, 32, .... I'm not sure that all your problems are solved at this point but I hope these suggestions can get back on track to continue developing.

How to View Different JSP Files by Clicking Different Tabs

Firstly I am very beginner at angular.js.
I have 3 jsp file. main.jsp, list.jsp and new.jsp.
I can view them from different urls but I want to combine them tabs in main.jsp. So I tried below but I couldn't success. I want to show them new.jsp and list.jsp files under tabs.
My main.jsp
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span10">
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<div ng-app="TabsApp">
<div id="tabs" ng-controller="TabsCtrl">
<ul class="nav nav-tabs content-tab-header" id="content_tab_0">
<li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"><a><i class="{{tab.cssClass}}"></i><tags:label text="{{tab.title}}"/></a></li>
</ul>
</div>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<!-- content ends -->
</div><!--/#content.span10-->
<script>
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'list.brands',
url: '/admin.brands/list',
cssClass: 'icon-th-list'
}, {
title: 'add.brand',
url: '/admin.brands/new',
cssClass: 'icon-plus'
}];
$scope.currentTab = '/admin.brands/list';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
</script>
list.jsp. Note that list.jsp has own controller.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div id="content" class="span10">
<div class="content-header">
<div class="row">
<div class="content-name span4">
<h3><i class="glyphicon glyphicon-bold"></i><tags:label text="brands"/></h3>
</div>
<div class="span8 button-group">
<jsp:include page="/admin/jsp/screens/help-button-inc.jsp"></jsp:include>
</div>
</div>
</div>
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-app="MyApp" ng-controller="PostsCtrl">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="post in posts | filter:search">
<td>{{post.brandid}}</td>
<td>{{post.name}}</td>
<td>{{post.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/edit?brandid={{post.brandid}}" ><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{post.brandid}}" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("PostsCtrl", function($scope, $http) {
$http.get('http://localhost/admin.brands/getJSONDataOfSearch').
success(function(data, status, headers, config) {
$scope.posts = data;
}).
error(function(data, status, headers, config) {
});
});
</script>
new.jsp
<div class="row-fluid sortable">
<div class="box span12">
<%-- <div class="box-header" data-original-title>
<h2>
<i class="glyphicon glyphicon-info-sign"></i>
<tags:label text="new.brand"/></h2>
</div> --%>
<div class="box-content">
<form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal">
<fields:form formName="brand.form" >
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<fields:field name="name" cssClass="validate[required]"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<fields:field name="isactive" value="1"/>
</div>
</div>
<div class="section-heading"><tags:label text="logo"/></div>
<div class="control-group">
<label class="control-label" for="textarea2"></label>
<div class="controls">
<template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"></template:file.upload>
</div>
</div>
<div class="form-actions">
<tags:label text="close"/>
<button type="submit" class="btn btn-ext-lightblue btn-modal-trigger"><tags:label text="save"/></button>
</div>
</fields:form>
</form>
</div>
</div>

AngularJS bootstrap collapsed init

I have the following html:
<div class="pull-right text-success m-t-sm">
<button class="btn btn-default" ng-init="isCollapsed = false" ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" data-placement="top" title="" data-original-title="Se kompetencer"><i class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" ng-click=""></i></button>
</div>
<div collapse="isCollapsed" class="panel-body collapse" style="height: 0px;">
<h4>Kompetencer</h4>
</div>
As you can see from this code i ng-init the isCollapsed variable to false.
However when i run my page I get the following view:
As you can see all of the boxes are visible? Can anyone tell me what might be going on here?
Note - I am not overwriting a variable or anything.
Maybe it has something to do with lazy load here is my config.router
.state('app.competence', {
url: '/Competence',
templateUrl: 'tpl/app_competence.html',
data: {
authorizedRoles: [USER_ROLES.lb, USER_ROLES.superadmin, USER_ROLES.subadmin]
},
resolve: {
deps: ['$ocLazyLoad',
function ($ocLazyLoad) {
return $ocLazyLoad.load(['ngGrid']).then(
function () {
return $ocLazyLoad.load(['js/controllers/competence/CompetenceController.js','js/controllers/competence/CompetenceUserController.js', 'js/controllers/competence/CompetenceTableController.js', 'js/controllers/headerController.js']);
}
);
}]
}
})
Html scope:
<tab ng-controller="CompetenceUserController as cuCtrl">
<tab-heading>
<i class="icon-users text-md text-muted wrapper-sm"></i>Brugere
</tab-heading>
<div class="wrapper-md">
<div class="row">
<div class="col-xs-12">
<div class="panel no-body">
<div class="panel-heading wrapper b-b b-light">
<input class="form-control" ng-model="search.$" placeholder="Søg">
<select class="form-control" ng-model="search.competence" ng-options="comp.name "></select>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="user in users | filter:search:strict">
<div class="media">
<span class="pull-left thumb-sm"><img
src="{{user.image_path || 'img/AdamProfil.png'}}" alt="..."
class="img-circle"></span>
<div class="pull-right text-success m-t-sm">
<button class="btn btn-default" ng-init="init(false)"
ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip"
data-placement="top" title=""
data-original-title="Se kompetencer"><i
class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}"
ng-click=""></i></button>
</div>
<div class="media-body">
<div><a href="">{{user.profile.firstname +' '+user.profile.lastname ||
user.username}}</a></div>
<small class="text-muted">{{user.title.name}}</small>
</div>
<div collapse="isCollapsed" class="panel-body collapse"
style="margin-top: 10px;">
<h4 class="h4">Kompetencer</h4>
<div class="table-responsive">
<table class="table table-striped b-t b-light">
<thead>
<th>Kompetence Navn</th>
<th>Niveau</th>
</thead>
<tbody>
<tr ng-repeat="comp in user.user_has_competences">
<td>{{comp.competence.name}}</td>
<td>{{comp.competence_level_id}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</tab>
My controller:
app.controller('CompetenceUserController', ['$http', '$scope', '$sessionStorage','competenceService', '$log', 'Session', 'api', function ($http, $scope, $sessionStorage, $log, Session, api, competenceService) {
$scope.init = function(value) {
$scope.isCollapsed = value;
};
$scope.competences = [];
competenceService.getRawList().then(function(response)
{
$scope.competences = response;
});
$scope.users = [];
$http.get(api.getUrl('userCompetence', null)).success(function (response) {
$scope.users = response;
});
}]);

It because you are initialising isCollapsed to false rather than true.

You are assigning value to isCollapsed to false which is not defined previously.ng-init="isCollapsed = false"
I prefer in this case to call a function and assign the value to variable.
<button class="btn btn-default" ng-init="init(false)" ng-click="isCollapsed = !isCollapsed" data-toggle="tooltip" data-placement="top" title="" data-original-title="Se kompetencer"><i class="fa {{isCollapsed == true ? 'fa-arrow-down': 'fa-arrow-up';}}" ng-click=""></i></button>
In controller
$scope.init = function(value) {
$scope.isCollapsed = value;
}
You can alsoe directly assign
$scope.isCollapsed = false;
in controller.

I don't think it has anything to do with the lazy loading, but rather that the isCollapsed isn't available in the scope you're referring it.
You can ensure it's available by wrapping it in an object (and maybe even declare your ng-init somewhere more up level).

ng-model for entrylimit is not working when reload the page in angularjs

I want to show 5 number of datas by default when I reload the page. But it shows blank as it is unable to select the entrylimit. I define in controller using $scope, but it doesnot working when reloading the page.
dynamic_table.html
<div ng-controller="dashboard">
<section id="main-content">
<section class="wrapper">
<!-- page start-->
<div class="row" >
<div class="col-sm-12">
<section class="panel">
<div class="breadcrumbs">Home > <b>Customers</b></div>
<header class="panel-heading">
Customers Table
</header>
<div class="row" style="margin: 5px 0 0 0;">
<div class="col-md-2">
<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" style="float:right;">
<input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
</div>
<div class="col-md-4">
<h5>Filtered {{ filtered.length }} of {{ totalItems}} total customers</h5>
</div>
</div>
<div class="panel-body">
<div class ="row">
<div class="adv-table" ng-show="filteredItems > 0">
<table class="display table table-bordered table-striped" id="dynamic-table">
<thead>
<tr>
<th>S.No <a ng-click="sort_by('user_id');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Name <a ng-click="sort_by('user_name');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Phone No. <a ng-click="sort_by('mobile');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Email ID <a ng-click="sort_by('email');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Registration Date <a ng-click="sort_by('created_at');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Status <a ng-click="sort_by('is_block');"><i class="glyphicon glyphicon-sort"></i></a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" class="gradeX" >
<td>{{data.user_id}}</td>
<td>{{data.user_name}}</td>
<td>{{data.mobile}}</td>
<td>{{data.email}}</td>
<td>{{data.created_at}}</td>
<td>{{data.is_block}}</td>
<!-- <button type="button" class="btn btn-{{buttonStyle}}" ng-click="toggle = !toggle">{{toggleText}}</button>-->
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No user found</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>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
</div>
loginController.js
app.controller('dashboard', function ($scope,$http,$cookies,$cookieStore,$timeout) {
$.post('http://54.173.65.120:2500/customer_list',{
access_token : $cookieStore.get('obj').accesstoken
},function(data){
//console.log(data);
var dataArray = [];
// console.log(data["aaData"]);
// console.log(data["aaData"].length);
data = JSON.parse(data);
data.forEach(function(column){
var d = {
user_id: "" ,
user_name: "" ,
email: "",
mobile: "",
created_at: "",
is_block: "",
}
var date = new Date(column.registration_datetime)
d.user_id = column.user_id;
d.user_name = column.first_name+" "+column.last_name;
d.email = column.email;
d.mobile = column.mobile;
d.created_at = date.toString();
d.is_block = column.is_block;
//console.log(d)
dataArray.push(d);
})
console.log(dataArray)
$scope.list = dataArray;
$scope.currentPage = 1; //current page
$scope.entryLimit = 5; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
});
$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;
};
});
Everything is working fine like sorting, filter, pagination only the problem is initially it selects zero number of datas.

Try moving
$scope.currentPage = 1; //current page
$scope.entryLimit = 5; //max no of items to display in a page
out of the $.post-success-function (e.g. before the $.post call) so that these values are set on controller load.
EDIT:
Additionally wrap the data assignment in an apply call
$scope.$apply(function() {
$scope.list = dataArray;
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
});