I find myself in a unique situation. I have implemented a dropdown called caseStatus within an ng-repeat loop, connected to a model containing Case Statuses. While this setup works fine and multiple dropdowns are rendered on the page as expected, there is a challenge when it comes to judges changing the case status. I am currently developing a function to handle this change, which I believe will be successful. However, my query pertains to how I can achieve the following two tasks (both of which may potentially be resolved using one method):
Ensure that each dropdown retains its last selected value upon a page refresh or return.
Ensure that it loads with the last selected value during the ng-repeat iteration. The model being used by ng-repeat contains the value for the Case Status.
Below is the code snippet, with a comment indicating the dropdown of interest:
<div ng-controller="CaseListCtrl">
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<i class="glyphicon glyphicon-calendar calclick"></i>
<a href="#" class="btn btn-primary flat-edge">>></a>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" id="deptSelect" selectpicker data-ng-model="department" ng-change="getCalendar();">
<option ng-repeat="department in departments">{{department.CourtRoom}}</option>
</select>
</div>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div>
<div class="col-sm-8 col-sm-offset-2 caselist" ng-model="cases" ng-repeat-start="case in cases | orderBy: ['sequence', 'AmPm', 'Sched_Time', 'Case_Number']">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.sequence}}" />
<!-- Add hidden field to hold the CalendarID value for updating the sequence later-->
<input type="hidden" name="CalendarID_{{case.Case_Number}}" value="{{case.CalendarID}}" />
</div>
<div class="casetitle">
<span class="caselink">{{case.Case_Number}}</span>
<a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-file"></span>
</a>
<a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-user"></span>
</a>
<select class="form-control" id="caseStatus" name="caseStatus" ng-model="caseStatus.statusID" ng-change="setStatus();" ng-options="castStatus.statusName for caseStatus in castStatus track by caseStatus.statusName" required></select><!-- This is the dropdown in question-->
{{case.Case_Title}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1">
<div class="hearing-time">{{case.Sched_Time}} {{case.AmPm}}</div>
<div class="hearing-title">{{case.Event}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
</div>
If you have any insights on achieving this, I would greatly appreciate your input!