I am currently encountering an issue with the code snippet included in my directive template
'<li ng-repeat="f in foos">' +
'<input type="radio" ng-change="foo(f.key)" ng-model="selectedFoo" name="foos" id="{{f.key}}" value="{{f.key}}">{{f.value}}</input>' +
'</li>' +
Within my link method, I have defined the following:
scope.foos = [
{ key: 'a', value: 'A', checked: true, symbol: 'a' },
{ key: 'b', value: 'B', symbol: 'b' },
{ key: 'c', value: 'C', symbol: 'c' }
];
scope.selectedFoo = "a";
I have implemented a method called foo that performs the following action
scope.foo = function(selectedValue) {
scope.selectedMatchType = selectedValue;
};
I am encountering two main issues:
- The first element in the dropdown is not automatically set as expected when the radio buttons are loaded, even though the ng-model is bound to selectedFoo.
- The foo method is only invoked once for each element in the list. For example, clicking on A triggers foo, then clicking on B also triggers foo, however, returning back to click on A does not trigger foo again unless another element like C is clicked on.
I am seeking assistance in identifying and resolving these problems. Any insights or suggestions would be greatly appreciated.