angularjs option list becoms empty when i select an option

Question

I am working on a django-tastypie api application where i am using angularjs as JavaScript framework.what I am doing is i have a list of curriculum objects where each curriculum object contains a list of grades objects and each of grade object contains a list of subjects. my data structure is as

{'id':1,
'name':'cbse',
'grades':[{'id':10,
            'name':'matriculation',
            'subjects':[
                        {'id':1,'name':'science'},
                        {'id':2,'name':'Math'},
                        {'id':3,'name':'English'}
                       ]
        }

I am using this data structure where each object carries it's releted object . I want to place these object in select box where so that choosing one object loads the other objects in the select fields . as if i use cbse from curriculum, all the grades into that objects loaded into the grades select option box. but the problem is when i select an option from curriculum select box it becomes empty.
my HTML is as follow

<label>Select Curriculum</label>
    <select ng-model="qt_curriculumlist" ng-options=" curriculum.name for curriculum in qt_curriculumlist" ng-change="loadGrades()">
</select></br>
<label>Select Grade</label> 
<select ng-model="qt_gradeslist" ng-options="grade.name for grade in qt_gradelist " ng-change="loadSubjects()">
</select>
<label>Select Subject</label>
<select ng-model="qt_syllabuslist" ng-options="subject.name for subject in qt_subject_list" ng-change="loadTopics()">
</select>

first times curriculum loaded correctly to the options field but after selecting an option list becomes empty.

Answer 1

That's because you set your ng-model the same as your list.

You should use a different variable for the model.