I have tried the following code and failed to get the select option working.
HTML:
<select class=" form-control input-sm" ng-model="formCompletionData.myFilter" ng-change="myFilterChange(formCompletionData.myFilter)">
<option value="">--select--</option>
<option ng-repeat="filter in myfilter" ng-selected="filter.isDefault==true" value="{{filter.filtername}}">{{filter.myfiltername}}</option>
</select>
Angular Code:
$scope.formCompletionData={};
This is the json reponse for $scope.myfilter:
so $scope.myfilter looks like this:
[ {
"_id":"598d8d9998ebb08100fdc272",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"Test",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"",
"status":"",
"isDefault":true,
"customerId":"SMRTsspd" }, {
"_id":"598da8ec98ebfdceb09d9f4c",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test2",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"59DDE8584B28AFFC49E47C89",
"status":"0",
"isDefault":false,
"customerId":"SMRTsspd" }, {
"_id":"598da8fd98ebfdceb09d9f4d",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test66",
"alluser":false,
"filtername":"594CCAB14B289B198AC85360",
"groupname":"5926C668B7A2B94251CA2EC6",
"status":"1",
"isDefault":false,
"customerId":"SMRTsspd" } ]
In my code below, it is working fine.
angular.module("App", [])
.controller("DemoController", function($scope) {
$scope.formCompletionData = {};
$scope.myfilter = [{
"_id":"598d8d9998ebb08100fdc272",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"Test",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"",
"status":"",
"isDefault":false,
"customerId":"SMRTsspd" }, {
"_id":"598da8ec98ebfdceb09d9f4c",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test2",
"filtername":"5A30DA2EB2D0FB046899AED3",
"groupname":"59DDE8584B28AFFC49E47C89",
"status":"0",
"isDefault":false,
"customerId":"SMRTsspd" }, {
"_id":"598da8fd98ebfdceb09d9f4d",
"createdBy":"58A559634025FD4867EDAB81",
"myfiltername":"test66",
"alluser":false,
"filtername":"594CCAB14B289B198AC85360",
"groupname":"5926C668B7A2B94251CA2EC6",
"status":"1",
"isDefault":true,
"customerId":"SMRTsspd"}];
$scope.selectFilter = function(filter) {
$scope.formCompletionData.myFilter=filter;
return true;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="App">
<div ng-controller="DemoController">
<select class="form-control input-sm" ng-model="formCompletionData.myFilter" ng-change="myFilterChange(formCompletionData.myFilter)">
<option value="">--select--</option>
<option ng-repeat="filter in myfilter" ng-selected="filter.isDefault==true && selectFilter(filter.filtername)" value="{{filter.filtername}}">{{filter.myfiltername}}</option>
</select>
</div>
</body>
Related
i'm developing an app that should have a form with select boxes that are populated dinamically with JSON arrays.
My problem is that the controller is correctly executed but the select options are not populated from the controller, there are empty.
This id my code:
<script>
angular.module('ionicApp', [
])
.controller('TimesController', function () {
console.log("JavaScript Function");
var data = <?php echo $json; ?>;
console.log(data);
var result = {
events: [],
events2: [],
events3: [],
schedules: [],
schedules2: [],
schedules3: []
};
var events = data;
//console.log("events");
//console.log(events);
var events2 = data;
var events3 = data;
var dates = [];
var sedi = [];
var professionisti = [];
console.log("qua3");
for (var i = 0; i < events.length; i++) {
if (dates.indexOf(events[i].day) === -1) {
var date = events[i].day;
dates.push(date);
result.events.push({
date: date
});
}
if (sedi.indexOf(events[i].sede) === -1) {
var sede = events[i].sede;
sedi.push(sede);
result.events2.push({
sede: sede
});
}
if (professionisti.indexOf(events[i].professionista) === -1) {
var professionista = events[i].professionista;
professionisti.push(professionista);
result.events3.push({
professionista: professionista
});
}
var a = 0;
var found = false;
while (a < result.schedules2.length) {
if (events[i].sede === result.schedules2[a].sede && events[i].professionista === result.schedules2[a].professionista) {
found = true;
}
a++;
}
if (found == false) {
result.schedules2.push({
sede: events[i].sede,
professionista: events[i].professionista
});
}
var a = 0;
var found = false;
while (a < result.schedules3.length) {
if (events[i].sede === result.schedules3[a].sede && events[i].professionista === result.schedules3[a].professionista && events[i].day === result.schedules3[a].date) {
found = true;
}
a++;
}
if (found == false) {
console.log("OLEE");
result.schedules3.push({
sede: events[i].sede,
professionista: events[i].professionista,
date: events[i].day
});
}
result.schedules.push({
sede: events[i].sede,
professionista: events[i].professionista,
date: events[i].day,
time: events[i].time
//console.log("qua4");
});
}
console.log(result);
})
</script>
<div ng-app="ionicApp" ng-controller="TimesController as ctrl">
<div align="center">
<p style="font-size: 22px;">Inserisci appuntamento</p>
<br>
<div class="list" align="center">
<div class="input-label">
</div>
<select style="width: 75%;" ng-options="event as event.sede for event in ctrl.data.events2" ng-model="ctrl.form.sede">
<option value="" disabled>Seleziona sede</option>
</select>
</div><br>
<div class="list" align="center">
<div class="input-label">
</div>
<select style="width: 75%;" ng-options="schedule as schedule.professionista for schedule in ctrl.data.schedules2| filter: { sede: ctrl.form.sede.sede}" ng-model="ctrl.form.professionista" ng-disabled="!ctrl.form.sede">
<option value="" disabled>Seleziona professionista</option>
</select>
</div><br>
<div class="list" align="center">
<div class="input-label">
</div>
<select style="width: 75%;" ng-options="schedule as schedule.date for schedule in ctrl.data.schedules3| filter: { professionista: ctrl.form.professionista.professionista, sede: ctrl.form.sede.sede}" ng-model="ctrl.form.giorno" ng-disabled="!ctrl.form.professionista">
<option value="" disabled>Seleziona giorno</option>
</select>
</div><br>
<div class="list" align="center">
<div class="input-label">
</div>
<select style="width: 75%;" ng-options="schedule as schedule.time for schedule in ctrl.data.schedules| filter: { date: ctrl.form.giorno.date, professionista: ctrl.form.professionista.professionista, sede: ctrl.form.sede.sede}" ng-model="ctrl.form.ora" ng-disabled="!ctrl.form.giorno">
<option value="" disabled>Seleziona orario</option>
</select>
</div><br>
</div>
</div>
Can someone help me to solve it?
Thank's
angular.module('app', []).controller('MyCtrl', function ($scope) {
$scope.list = [{
id: 27,
name: "loruth water point",
latitude: 4.453488123,
longitude: 35.36021409
}, {
id: 28,
name: "kibish",
latitude: 5.286289986,
longitude: 35.82917452
}, {
id: 30,
name: "Ekalale",
latitude: 4.434588531,
longitude: 35.72135923
}, {
id: 34,
name: "karubangorok",
latitude: 4.506236007,
longitude: 35.4201746
}, {
id: 35,
name: "nakitoe kakumon",
latitude: 4.214576564,
longitude: 35.35912495
}, {
id: 36,
name: "kaikor mission",
latitude: 4.516645656,
longitude: 35.42262991
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MyCtrl">
<h2>List:</h2>
<p>
<select ng-model="selectedItem" ng-options="item.name for item in list">
<option value="">-- choose --</option>
</select>
</p>
<p>
<h2>Selected:</h2>
{{selectedItem.name}}
</p>
</div>
</div>
Check this example once.
Im trying to create a dependent drop-down list box using json.For example: if the car brand selected is "bmw" then the car model drop-down must display only "suv" from the list and other two options shouldn't be displayed.Likewise for "Mercedes" it should display only "suv" and "coupe" in the car model. And also please explain what is the use of json? also how it effect the code.
my.html
Car Brand:
<select name="carname" ng-model="userSelect" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
<option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" >
{{ManufactureBrand}}
</option>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
<option ng-repeat="CarName in b" ng-bind="CarName">
{{CarName}}
</option>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
script.js
app.factory('Brandtest', function () {
var brand = {};
brand.sample = ['Bmw', 'Mercedes', 'Honda'];
brand.car = ['Suv', 'Sedan', 'Cope'];
{
return brand;
}
});
app.controller('selectDropdown', ['$scope', 'Brandtest', function ($scope, Brandtest) {
$scope.a = Brandtest.sample;
$scope.b = Brandtest.car;
$scope.list=[];
$scope.carlist=[];
$scope.checkselection = function () {
if ($scope.userSelect != "" && $scope.userSelect != undefined &&
$scope.selectCar != "" && $scope.selectCar != undefined )
{
$scope.list.push($scope.userSelect);
$scope.carlist.push($scope.selectCar);
}
Thanks in advance.
Here is the working plunkr
You have to modified you code as below
your factory should be like this
app.factory('Brandtest', function () {
var brand = {};
brand.sample =[
{
"id": 0,
"carName": "BMW"
},
{
"id": 1,
"carName": "Mercedes"
},
{
"id": 2,
"carName": "Honda"
}
];
brand.car =[
{
"id": 0,
"carType": "Suv",
"parentId": 0
},
{
"id": 1,
"carType": "Sedan",
"parentId": 1
},
{
"id": 2,
"carType": "Cope",
"parentId": 2
}
];
{
return brand;
}
});
In your HTML modify the code like below
<body ng-controller="selectDropdown">
Car Brand:
<select name="carname" ng-model="userSelect" ng-options="p.carName for p in a" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" ng-options="c.carType for c in b | filter:{parentId: userSelect.id}" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr ng-repeat="carz in list track by $index">
<td>{{carz.carName}}</td>
<td>{{carlist[$index].carType}}</td>
</tr>
</table>
</body>
You have to maintain some co-relation between the 2 dropdowns. Better would be to have a single json object and use ng-options for populating the second dropdown based on value selected in first dropdown. Run the demo program below and you will get the point.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Select a car:</h1>
<select ng-model="x" ng-options="x for (x, y) in cars"></select>
<h1 ng-if="x">Category: </h1>
<select ng-if="x" ng-model="y" ng-options="y for y in x"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
"car01" : ["Ford", "BMW", "NISSAN"],
"car02" : ["Fiat", "Infinity"],
"car03" : ["Volvo", "Toyota"]
}
});
</script>
</body>
</html>
I have to generate a table from JSON data in angular, where the table should have the structure like in this fiddle. Where the table should have columns till the no. of days in a month where month is given as input, Now the data corresponding to that student on that particular date should be displayed in each row.
Sample json is:
{
"start_date":"2016-01-01 9:30:00",
"end_date":"2016-01-01 17:00:00",
"details":"Logged",
"name":"XXX"
},
{
"start_date":"2016-03-02 10:30:00",
"end_date":"2016-03-02 12:00:00",
"details":"Logged",
"name":"XXX"
},
{
"start_date":"2016-03-03 10:30:00",
"end_date":"2016-03-03 12:00:00",
"details":"Logged",
"ename":"XXX"
}
code
<!doctype HTML>
<html ng-app="myApp">
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl">
Select student to get data :
<input type="text" value="" ng-model="search" id="search"/>
<select id="monthSel" ng-model="selMonth">
<option value="01">January</option>
<option value="02">February</option>
<option selected="selected" value="03" >March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<table border="1">
<tr >
<th>Name</th>
<th ng-repeat="data in jsonData | FilterByMonth:selMonth">{{data.start_date|dateFormat}}</th>
</tr>
<tr ng-repeat="stud in students| filter:search">
<td>{{stud}}</td>
<td ng-repeat="data in jsonData |filter:{ename:search} | FilterByMonth:selMonth ">{{data.start_date|time}} {{data.end_date|time}}</td>
</tr>
</table>
<script>
</script>
</body>
</html>
controller
var app = angular.module('myApp', [ ]);
app.controller('MyCtrl', function($scope,$http) {
$scope.events = [];
$scope.scheduler = { date : new Date() };
$http.get("data.json")
.success(function(response) {
$scope.jsonData = response;
$scope.students= $scope.jsonData.map(function(a) {return a.ename;});;
$scope.students= $scope.students.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);
}).error(function(response){
alert("error"+angular.toJson(response));
});
});
app.filter('dateFormat', function($filter)
{
return function(input)
{
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
return _date.toUpperCase();
};
});
app.filter('time', function($filter)
{
return function(input)
{
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input), 'HH:mm:ss');
return _date.toUpperCase();
};
});
app.filter('FilterByMonth', function ($filter) {
return function (items, month) {
var filtered = [];
// var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var _date = new Date(item.start_date);
if ( _date.getMonth()+1 == month) {
filtered.push(item);
}
}
return filtered;
};
});
Try this at the td's :
<!doctype HTML>
<html ng-app="myApp">
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl">
Select student to get data :
<input type="text" value="" ng-model="search" id="search"/>
<select id="monthSel" ng-model="selMonth">
<option value="01">January</option>
<option value="02">February</option>
<option selected="selected" value="03" >March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<table border="1">
<tr ng-repeat="stud in students| filter:search">
<td data-title="{{data.start_date}}">{{stud}}</td>
<td data-title="{{data.start_date}}" ng-repeat="data in jsonData |filter:{ename:search} | FilterByMonth:selMonth ">{{data.start_date|time}} {{data.end_date|time}}</td>
</tr>
</table>
<script>
</script>
</body>
Do it with the data-title, it will add automatically the th with the value that you want, if it dont work, inject ngTable, maybe you'll need it to run that code, here you have a full example --> ngTable Example
I'm trying to filter by filter1 AND filter2 AND filter3. Everything works except for my ng-click attributes. I'm not clear on how the syntax should look to make this example function as needed.
Here is a link to the example: http://jsfiddle.net/40vrs6db/
<div ng-app ng-controller="MainController">
<div ng-repeat="strain in strainsFound = (strains | filter:{name: strain_name, storesThatHaveIt:strain_storesThatHaveIt, tod:strain_tod})">
<div>
<p data-t="{{strain.storesThatHaveIt}}">{{strain.name}}</p>
<p>{{strain.tod}}</p>
</div>
</div>
<select ng-model="strain_tod">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
<option value="night">Night</option>
</select>
<div ng-model="strain_storesThatHaveIt">
<a ng-click="Hastings">Hastings</a>
<a ng-click="Kingsway">Kingsway</a>
<a ng-click="Quebec">Quebec</a>
<a ng-click="Ontario">Ontario</a>
</div>
<input ng-model="strain_name" />
</div>
function MainController($scope) {
$scope.strain_name = "";
$scope.strain_storesThatHaveIt = "";
$scope.strain_tod = "";
$scope.strains = [{
"storesThatHaveIt": ["Hastings", "Ontario", "Kingsway"],
"name": "rub",
"tod": ["night"]
}, {
"storesThatHaveIt": ["Hastings"],
"name": "shatter",
"tod": ["evening", "night"]
}, {
"storesThatHaveIt": ["Kingsway"],
"name": "sour diesel",
"tod": ["morning", "afternoon", "evening"]
}, {
"storesThatHaveIt": ["Hastings", "Quebec"],
"name": "m39",
"tod": ["morning", "afternoon"]
}]
}
Thanks to Petr Averyanov I now have the answer :
<div ng-app ng-controller="MainController">
<div ng-repeat="strain in strainsFound = (strains | filter:{name: strain_name, storesThatHaveIt:strain_storesThatHaveIt, tod:strain_tod})">
<div>
<p data-t="{{strain.storesThatHaveIt}}">{{strain.name}}</p>
<p data-t="{{strain.storesThatHaveIt}}">{{strain.tod}}</p>
</div>
</div>
<select ng-model="strain_tod">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
<option value="night">Night</option>
</select>
<div>
<a ng-click="strain_storesThatHaveIt = 'Hastings'">Hastings</a>
<a ng-click="strain_storesThatHaveIt = 'Kingsway'">Kingsway</a>
<a ng-click="strain_storesThatHaveIt = 'Quebec'">Quebec</a>
<a ng-click="strain_storesThatHaveIt = 'Ontario'">Ontario</a>
</div>
<input ng-model="strain_name" />
</div>
<script>
function MainController($scope) {
$scope.strain_name = "";
$scope.strain_storesThatHaveIt = "";
$scope.strain_tod = "";
$scope.strains = [{
"storesThatHaveIt": ["Hastings", "Ontario", "Kingsway"],
"name": "rub",
"tod": ["night"]
}, {
"storesThatHaveIt": ["Hastings"],
"name": "shatter",
"tod": ["evening", "night"]
}, {
"storesThatHaveIt": ["Kingsway"],
"name": "sour diesel",
"tod": ["morning", "afternoon", "evening"]
}, {
"storesThatHaveIt": ["Hastings", "Quebec"],
"name": "m39",
"tod": ["morning", "afternoon"]
}]
}
</script>
I have the dropdown as demonstrated below. All of this work. I just need to set default value for each one. I know how to do it for the upper level but how to do it for the next levels?
This is my html code:
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-change="onBookChange(books,book)" ng-model="book" ng-options="bb.bookName for bb in books" class="form-control" >
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="chapter" ng-change="onChapterChange(books,chapter)" ng-options="cha.chapterName for cha in books.selectedChapters" class="form-control" >
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="title" ng-change="onTitleChange(books,title)" ng-options="t for t in books.selectedTitles" class="form-control" >
<option value="">--Select--</option>
</select>
</div>
</div>
</body>
</html>
and this is my javascript code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.books=[
{
id:1,
bookName:'C++',
chapter:[
{chapterName:'Introduction',titles:['About Author','C++ Basic']},
{chapterName:'OOPS basic',titles:['Class','Object','Data Encapsulation','Inheritance','Interface']},
]
},
{
id:2,
bookName:'Java',
chapter:[
{chapterName:'Java Introduction',titles:['About Author','Java Intro']},
{chapterName:'Java basic',titles:['Variables','Function','Function Overloading','Class','Object']},
]
},
{
id:3,
bookName:'Angular JS',
chapter:[
{chapterName:'Introduction',titles:['MVC','Model','View','Controller']},
{chapterName:'Key Features',titles:['Template','Scope','Expressions','Filter','Controller','Module']},
]
}
];
$scope.onBookChange=function(b,book){
//alert("inside");
b.selectedChapters=book.chapter;
}
$scope.onChapterChange=function(b,cha){
//alert("inside");
// console.log(cha);
b.selectedChapter=cha;
b.selectedTitles=cha.titles;
}
$scope.onTitleChange=function(b,t){
// alert(t);
b.selectedTitle=t;
}
});
Please see demo below
var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function($scope) {
$scope.books = [
{
id: 1,
bookName: 'C++',
chapter: [{
chapterName: 'Introduction',
titles: ['About Author', 'C++ Basic']
}, {
chapterName: 'OOPS basic',
titles: ['Class', 'Object', 'Data Encapsulation', 'Inheritance', 'Interface']
},
]
}, {
id: 2,
bookName: 'Java',
chapter: [{
chapterName: 'Java Introduction',
titles: ['About Author', 'Java Intro']
}, {
chapterName: 'Java basic',
titles: ['Variables', 'Function', 'Function Overloading', 'Class', 'Object']
},
]
}, {
id: 3,
bookName: 'Angular JS',
chapter: [{
chapterName: 'Introduction',
titles: ['MVC', 'Model', 'View', 'Controller']
}, {
chapterName: 'Key Features',
titles: ['Template', 'Scope', 'Expressions', 'Filter', 'Controller', 'Module']
},
]
}
];
$scope.onBookChange = function(b, book) {
//set default chapter
$scope.chapter = book.chapter[0];
//set default title
$scope.title = $scope.chapter.titles[0];
}
$scope.onChapterChange = function(b, chapter) {
$scope.title = chapter.titles[0];
}
$scope.onTitleChange = function(b, t) {
// alert(t);
b.selectedTitle = t;
}
});
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-app="app">
<div ng-controller="homeCtrl">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-change="onBookChange(books,book)" ng-model="book" ng-options="bb.bookName for bb in books" class="form-control">
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="chapter" ng-change="onChapterChange(books,chapter)" ng-options="cha.chapterName for cha in book.chapter" class="form-control">
<option value="">--Select--</option>
</select>
</div>
<div class="col-md-4 col-xs-4 col-sm-4">
<select required ng-model="title" ng-change="onTitleChange(books,title)" ng-options="t for t in chapter.titles" class="form-control">
<option value="">--Select--</option>
</select>
</div>
</div>
</div>
</div>
</body>
you have your ng-models set to book, chapter, title. You just need to assign the default values to these on the scope
$scope.book = $scope.books[0];
//in the onBookChange function
$scope.chapter = book.chapter;
//in the onChapterChange function
$scope.title = cha.titles[0];