We Keep Coding

How to assign default Values to Multiple select option in Angularjs

I have created multiple select option drop-downs. Now I want to assign default selected values to the multiple select options. I have created code and it's working fine but the problem with the options value. I want id as a value in options.
javascript:-
$scope.availableOptions = [{"client_id":"62024","client_name":"Advantage Land Co"},{"client_id":"59194","client_name":"Alpha - Brookings, SD"},{"client_id":"62413","client_name":"B and B Auto"},];
$scope.simpli_client = {};
$scope.simpli_client =["62024", "62413"];
and php code:-
<select id="multiSelect" class="ng-pristine ng-valid form-control" multiselect="" multiple="" ng-model="simpli_client" ng-options="option.client_id as option.client_name for option in availableOptions"></select>
It's working fine. Showing all the default values selected but I need client_id in option values. like this:-
<select id="multiSelect" class="ng-pristine ng-valid form-control" multiselect="" multiple="" ng-model="simpli_client" ng-options="option.client_id as option.client_name for option in availableOptions"><option value="62024" selected="selected">Advantage Land Co</option><option value="59194">Alpha - Brookings, SD</option><option value="62413" selected="selected">B and B Auto</option></select>
I need values in the option fields (value="62024").

Here is a working fiddle : https://jsfiddle.net/xhph7qny/1/
You can use track by provided by angular ng-options.
HTML
<select id="multiSelect" class="ng-pristine ng-valid form-control" multiselect="" multiple="" ng-model="simpli_client" ng-options="option.client_id as option.client_name for option in availableOptions track by option.client_id"></select>
JS
$scope.simpli_client =[{"client_id":"62024","client_name":"Advantage Land Co"},{"client_id":"59194","client_name":"Alpha - Brookings, SD"}];
});
The only change is JS is that the ng-model should contain the entire objects rather than only client ids.

IE, ng-repeat for select cutting text or showing {{}}

Basic Problem
I have a multi-select (list) that depending on how I write the html/angular has a bug. In the first case the last 3 characters are cut off from the rendering. In the second case the name is not visible but instead the {{}} placeholder until the item is clicked.
I'd simply like a way for me to display the elements in a correct fashion without bugs.
Finally, this behavior seems to happen if an element is added to the categories array after the page and select has rendered.
With ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}" ng-bind="cat.name"></option>
</select>
Without ng-bind
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
<option ng-repeat="cat in categories" value="{{cat.id}}">{{cat.name}}</option>
</select>
With ng-options
With ng-options everything appears but I am unable to actually click on the elements to select them - they are frozen.
<select id="categories" name="categories" class="ep_field sumoSelect" multiple="multiple"
ng-model="selectedCategories"
ng-change="angularCategorySelectedGrants($event)"
ng-options="cat.name for cat in categories track by cat.id" >
</select>
Since no-one wrote an answer, see my own work-around as the accepted answer.

My own workaround
It seems the problem was with adding an item to the categories array after the initial rendering has taken place. There we two workarounds I found:
Add all elements to the array only once without adding again OR
Hide the dom select element utilizing ng-if for 100ms and make it visible again. This forces the browser to re-render the elemnents and renders them correctly.
In HTML (wrapping the select):
<div ng-if="categories!=undefined && categoriesLoaded">
...Select code here...
</div>
In the controller (Javascript):
$scope.categoriesLoaded = false;
//Trigger render
$timeout(function(){ $scope.categoriesLoaded = true;}, 0);

How to populate a value in a select ( HTML ) list in AngularJS

I am using a select list in a particular edit form page. Whenever a particular entry has to be edited, a new state with the edit form appears. It has a select list which has to populated with one of its options (ideally the value that is fetched from the server using API has to be populated into the select).
I am using Angular JS on the client side. Could somebody please tell me how to achieve the same thing using Angular JS?
I need that initial value inserted by the user in the select to be shown up as a default when the edit page is opened.
(MOREOVER, MY PLACEHOLDER NOT WORKING:"Choose a country")
Lets say there is something like this:
<div class="col-md-8">
<select data-placeholder="Choose a Country..." class="chosen-select form-control" style="width:350px;" tabindex="2" required="" ng-model="location">
<option value="" disabled selected>Select</option>
<option ng-repeat="location in locations1" value="{{location.id}}">{{location.name}}</option>
</select>
</div>

Use ngOptions.
<select ng-options="location as location.name for location in locations track by location.id" ng-model="selected"></select>

With ng-options you can do it like this:
<div class="col-md-8">
<select ng-model="selectedLocation" ng-options="location.id as location.name for location in locations1" class="chosen-select form-control" style="width:350px;" tabindex="2">
<option value="" disabled selected>Choose a Country</option>
</select>
</div>
The location.id is set to the options value and the location.name is set to the text.
To use a placeholder in a select is kind of what the default options does for you. So I would set the default option text to "Choose a country". Se this SO answer on that topic

AngularJS - bootstrap - bootstrapDualListbox - on select values on left side all are selecting/moving to right side

I am using bootstrapDualListbox
JS
$('select[name="duallistbox_demo1[]"]').bootstrapDualListbox({
moveOnSelect: false
});
HTML
<select multiple="multiple" size="10" name="duallistbox_demo1[]" ng-model="selectedStaff"><option ng-repeat="staff in staffs" value="{{staff.userId}}">{{staff.firstName}} {{staff.lastName}}</option>
</select>
If I use options as different values(not from ngRepeat) swapping is fine. If I use from ng-repeat, on selection all values are swapping rather selected. How I solve this?

Please check using ng-options with select instead of options with ng-repeat.
<select multiple="multiple" size="10" ng-options="staff as staff.firstName for staff in staffs track by staff.userId" name="duallistbox_demo1[]" ng-model="selectedStaff">

Making a option selected in a select element in my joomla component backend form

im trying to extend a joomla 3 component's backend form, by adding a datatable which populates data from a table in the database, where the user can add, edit or delete a row. I have the data being displayed and can delete data, but when i come to edit the data im having some issues.
When the user pressed the edit button the data is to be pulled from the database and populated in a form so the user can make changes to it. im getting the data and im populating the form correctly, but i have a select element where i need to make one of the options selected, and i'm having trouble with this, as joomla for some reason alters the select element. below is my code which will make more sense.
// My JQuery code for populating the form
function populateForm(data) {
var dId = jsl('#ajax-discount #d_id');
var dState = jsl('#ajax-discount #d_state');
var dCode = jsl('#ajax-discount #d_code');
var dType = jsl('#ajax-discount #d_type');
var dValue = jsl('#ajax-discount #d_value');
var formStatus = jsl('#ajax-discount-msg');
dId.val(data.message.id);
dState.val(data.message.state);
dCode.val(data.message.discount_code);
//jsl('select[name="d_type"]').val(data.message.discount_type);
dType.val(data.message.discount_type).trigger( "listz:updated" );
//jsl("#ajax-discount #d_type_chzn > ul.chzn-results > li [value='2']").attr("selected", "selected");
//dType.val(data.message.discount_type);
//dType.change();
dValue.val(data.message.discount_value);
}
// my form which is located in my components tmpl/edit.php file
<div class="control-group">
<div class="control-label">Discount Type</div>
<div class="controls">
<select id="d_type" name="d_type">
<option value="0"></option>
<option value="1">$ AUD</option>
<option value="2">% Discount</option>
<option value="3">Free Shipping</option>
</select>
</div>
</div>
// the select element when its rendered in the browser
<div class="control-group">
<div class="control-label">Discount Type</div>
<div class="controls">
<select id="d_type" name="d_type" class="chzn-done" style="display: none;">
<option value="0"></option>
<option value="1">$ AUD</option>
<option value="2">% Discount</option>
<option value="3">Free Shipping</option>
</select><div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="d_type_chzn"><a class="chzn-single chzn-default" tabindex="-1"><span>Select an option</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chzn-results"><li class="active-result" style="" data-option-array-index="1">$ AUD</li><li class="active-result" style="" data-option-array-index="2">% Discount</li><li class="active-result" style="" data-option-array-index="3">Free Shipping</li></ul></div></div>
</div>
</div>
I have tried many different ways, but im stuck at the moment can any please give me some advice or know what i should be doing.

I have solved my question, took me hours to see what i was doing wrong, sometimes stepping away from a problem helps you think about it differently. OK so we know that Joomla uses different plugins and libraries to get its backend to work. One of these Joomla plugins is something called chosen http://harvesthq.github.io/chosen/.
this plugin changes or manipulates a select element. this is why it was rendering differently in browser. so what i was missing really from my code is a way to refresh my change on the ui and below is how you do it.
dType.val(data.message.discount_type).trigger('liszt:updated');