AngularJS how to update input radio UI?

Question

• How do i set the default value of a radio input? ctrl.teamSelectionOption = {value:'createTeam'};

• Then update it when the data returns from the server ? ctrl.teamSelectionOption = {value:'chooseTeam'};

• From the template, How do i check which input has been selected? <button class="btn btn-sm btn-primary" ng-click="$ctrl.getTeamOption($ctrl.teamSelectionOption.value)" >Select</button>

These questions are all very closely related. This is roughly what i have now:

(function(angular) {
  'use strict';
angular.module('app').component('bringTeamToEvent', {
  templateUrl: '/assets/ng/app/team/bringTeamToEvent.html',
  bindings: {
    teamSelectionOption: '<',
    teamFeesPanel: '<'
  },
  controller: function($http){

    var ctrl = this;
    ctrl.teamFeesPanel = false;
    ctrl.teamSelectionOption = {value:'createTeam'};


    $http({
      method: 'GET',
      url: '/team',
    }).then(response => {
      this.teams = response.data;
      // console.log(response.data);
    }, response => {      

      if(ctrl.teams.length > 0 ? true : false){
        ctrl.teamSelectionOption = {value:'chooseTeam'};
      }
  
      if(ctrl.teams.length == 0 ? true : false){
        ctrl.teamSelectionOption = {value:'createTeam'};
      }
      
    });

    <div class="teamSelectionPanel" ng-show="!$ctrl.teamFeesPanel">
        <div ng-if='$ctrl.teams.length > 0'>            
            <input ng-model="$ctrl.teamSelectionOption.value" type="radio" name="team" value="chooseTeam" ng-checked="($ctrl.teamSelectionOption.value==chooseTeam)">
            <label for="chooseTeam">Choose an existing team</label><br>
            
            <select class="form-control" ng-model="$ctrl.teamSelection" ng-options="team.name for team in $ctrl.teams track by team.id">
                <!-- ng-change="$ctrl.onTeamSelectCallback(value)" -->            
            </select><br>    
        </div>
        
        <!-- active? -->
        <input ng-model="ctrl.teamSelectionOption.value" type="radio" name="team" value="createTeam" ng-checked="($ctrl.teamSelectionOption.value==createTeam)">          
        <label for="createTeam">Create new team</label><br>                        
    </div>

example plunker: https://plnkr.co/edit/8B59uBiz6sJ2x6CK?preview

Answer 1

For now i am using $scope in the controller, i was trying to avoid this as i heard it was bad practice, but i couldn't see another way.

1 problem was trying to work with the value directly, instead i updated my model to access the name as the docs suggest: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D

<input type="radio" ng-model="teamSelectionOption.name" value="choose">choose<br>
<input type="radio" ng-model="teamSelectionOption.name" value="create">create<br>

setting the default option and updating it is done like so in the controller

    $scope.teamSelectionOption = {
      name: 'create'
    };

then accessing in the template. {{teamSelectionOption.name}}