I'm new to a project where we're using AngularJS on the front-end and Play Framework Templates to generate the HTML pages. I have some experience with Angular, but I'm new to Play. The problem I'm having is that the radio buttons are automatically defaulting to a value, when they are not set to. I want them to not have a default value. It doesn't matter what order I put the radio buttons in, it always defaults to the last value listed. The data binds correctly, but when I return to the page I lose the saved value and it defaults back to last value listed. It appears as if something else is bound to the object, but I'm out of places to look. Hence why I've come crawling to you. This is my Play Template code that creates the radio buttons:
@inputRadioGroup( app("primary")("OSPlatform"), options = options("iOS"->"iOS","Both"->"Both","Android"->"Android"), '_label -> "OS/Platform" , Symbol("ng-model")->"data.primary.OSPlatform", '_showConstraints -> true )
This is my Angular controller:
app.controller('RegisterAppCtrl', function($scope, $location, registerAppService) {
$scope.$on('$viewContentLoaded', onLoadPage());
$scope.isActive = function(route) {
return route === $location.path();
};
$scope.data= {};
$scope.$on("$locationChangeStart", function(event){
registerAppService.set($scope.data);
});
$scope.setData = function() {
registerAppService.set($scope.data);
};
var init = function() {
$scope.data = registerAppService.get();
console.log($scope.data);
};
init();
});
I'm currently logging out the object and it looks like this one the next page:
{"primary":{"OSPlatform":"iOS","InternalExternal":"Both","AppName":"This Is The App Name"},"iOS":{"MetaData":{"AppLabel":"This is a App Label"}}}
And then looks like this when I return to the orginal page where I set the value of the radio button.
{"primary":{"OSPlatform":"Both","InternalExternal":"Both","AppName":"This Is The App Name"},"iOS":{"MetaData":{"AppLabel":"This is a App Label"}}}
Notice that primary.OSPlatform got set to Both. This behaviour is consistent across all the radio buttons on the form. I've tried replacing the Play Template code with HTML, yet I still get the same behaviour. When I remove ng-model, the radio buttons have no default value (what I want). So it feels like I have something unknown bound to this object. Is there a way to detect what is bound to a particular object? So far in my research the answer I've found to that question is no. Any help is greatly appreciated. Let me know if you need more details.
EDIT Request:
We're using Angular 1.4.2. The generated html code:
<span class="buttonset" id="primary_OSPlatform">
<input type="radio" id="primary_OSPlatform_Android" name="primary.OSPlatform" value="Android" ng-model="data.primary.OSPlatform" class="ng-pristine ng-untouched ng-valid">
<label for="primary_OSPlatform_Android">Android</label>
<input type="radio" id="primary_OSPlatform_iOS" name="primary.OSPlatform" value="iOS" ng-model="data.primary.OSPlatform" class="ng-pristine ng-valid ng-touched">
<label for="primary_OSPlatform_iOS">iOS</label>
<input type="radio" id="primary_OSPlatform_Both" name="primary.OSPlatform" value="Both" ng-model="data.primary.OSPlatform" class="ng-pristine ng-untouched ng-valid">
<label for="primary_OSPlatform_Both">Both</label>