Develop Reference

ng-repeat with ng-selected

I am trying to figure out how to generate list of option elements using ng-repeat, but one of them to be marked as the selected option on load.
After googling, what I found is this base, which I modified by adding the selected property to the data objects
https://plnkr.co/edit/7g4MeAQnG4PzpnrebBGc?p=preview
However, it seems that ng-selected="option.selected == true" has no effect :(
Why? I also have the more complex example here: http://jsfiddle.net/ej5fx3kr/14/ which works, although I am not sure what is the difference, or what is the model here used for (note: changing the model name from "program" to anything, it still works... so not sure what is the purpose).
Bonus points: How do I debug code in AngularJS in directives? Like experiment in debug mode line by line to actually see what are the variable values in that particular scope, what is available to use, etc...
My ultimate goal in this question, is to load list of values via ajax on page load in the controller, IF there is a routeParam in the URL, find it in the list of loaded values, and add selected attribute, then set selected=true in the generated HTML on page load, otherwise not pre-select anything in the populated select box on the page load, so this is why its important for me to understand this on the simplest example before trying to plug this in.
Thanks!

The "Angular Way" to handle this is to use ng-options instead of ng-repeat, and then simply set the model equal to the default value on controller load.
For example:
<select ng-options="option.name for option in data.availableOptions"
ng-model="selectedItem"></select>
$scope.selectedItem=$scope.data.availableOptions[2];
For a more advanced case, where your ng-model might not be the object in the array, but a single property, you can use a modified version of ng-options:
<select ng-options="option.id as option.name for option in data.availableOptions"
ng-model="selectedId"></select>
$scope.selectedId = '2';
Here is a modified version of your plunker showing these different possibilities: https://plnkr.co/edit/xzYmXf8C3WuZaelwj5hO?p=preview

Using ng-selected = true inside ng-repeat would solve this .
However be sure of the data that you call in ng-repeat.For additional debugging and experiment line by line use chrome debugger .go to source tab and set break points on the js lines that you need to debug.This will let you debug line by line by pause and play . Hope this helps.Thanks

Two way binding for checkbox inside an accordion not workiing

In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon

We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!

Calling function on dropdown AngularJS

I have an interesting scenario happening right now and it's confusing me, this question is initially meant for those who are familiar with Angular UI Grid. However, you are welcome to answer.
I have a UI Grid that I call a drop down through a separate html page in the grid itself because the dropdown values dynamically change. Now I have ng-model of this drop as ng-model="row.entity.someValue" this would be the value of the $scope.someDate.someValue that is obtained from the grid with field: 'someValue'. The issue I'm having at hand is after selection I cannot fire a function call, I'm avoiding id="" calls because I want the code to be consistent and not use getElementById calls. I've tried ng-selected, ng-change even ng-class (knowing it wouldn't work) What I'm trying to do is fire a function with the selected value as a parameter and I cannot get the function to fire. What am I missing here?
Here is a same code of what I'm trying to achieve:
<div>
<select ng-model="row.entity.someValue" class="dropdownWidth" ng-selected="someFunction(selectedValue)" >
<option ng-repeat="selectedValue in grid.appScope.someArray" value={{selectedValue}}>{{selectedValue}}</option>
</select>
</div>
UPDATE Answer below

The answer was right there in front of me, which I keep forgetting. Every time a call to a grid cell is made outside of the controller you always apply grid.appScope in anything thing pertaining to the cell's value
in my case I was just calling ng-selected="someFunction(selectedValue)" when in fact I should've been calling ng-selected="grid.appScope.someFunction(row.entity.someValue)". Now it works perfectly, hopefully this scenario will be of some good use for anyone in the future!

Knockout not updating on input value changed with datepicker

So I have to collect a date and time from the user. I want to be able to set both from a single picker. I found this nice one by curious solutions here. Our site uses jQuery, jQuery mobile, and Knockout. When I use the datepicker to select the date my knockout binded variable is not updating, even though the value of the input box has changed. If I use jQuery to get the value it shows up just fine.
So my question: Can someone help me figure out how to get my knockout binding to update?
I've already tried setting the valueUpdate to input, and afterkeydown with no luck.
Here is a link to a fiddle I made that demonstrates the problem: http://jsfiddle.net/TrueEddie/eg6zM/

In the plugin, when the value of the element is set it needs to trigger the change event.
Something like:
_setValueOfElement: function(sElemValue)
{
var dtPickerObj = this;
var $oElem = $(dtPickerObj.dataObject.oInputElement);
if(dtPickerObj._compare($oElem.prop("tagName"), "INPUT"))
$oElem.val(sElemValue);
else
$oElem.html(sElemValue);
//ADDED THIS LINE
$oElem.change();
return sElemValue;
},
The plugin doesn't seem to have any eventing built-in, so doesn't look like there is a good way to react to the value being set otherwise.

AngularJS - missing ng-model items in $scope object

I'm trying to create a table in which you can edit each row and save your changes. I'm having trouble posting all of the items in the row after pressing save. For some reason, only some of the elements are being sent. Any help or insight would be appreciated.
Here is a plunker of my code
I watched the console in dev tools, and it looks like the $scope.editedEvent object (line 12 in app.js) contains undefined paramaters, except for "name".

As I said in my comment, you can't put ng-model and ng-bind ( or {{}} ) in the same element. Ng-model is for input type fields (input, select, textarea...) and ng-bind for span,div,etc.
So based on what I've understood from your question I've updated the code to make it "angular compliant", when you click the save button it will update the $scope variable editedEvent with the contents of that row and the selected value from the select.
plunkr

Are only name and distance sent? Then look at your convertEvent function ... you are creating a new object with to fields: name and distance.
greetings

Here's a fork with some corrections to achieve what I believe you are looking for:
http://plnkr.co/edit/HTERoyQnP2YQfjnjUVb7
In setting the editedEvent object to use the scope variables you are binding those values to those variables so they stay in sync. Because of this, the editedEvent object is changing out from under you by the time you save (everything is set back to undefined ready for the new "editing" state). Just create a blank editedEvent object and Angular will just fill those out using hg-model instead.