Jason Jason - 7 months ago 80
AngularJS Question

Angular select using ng-options and ng-selected

I am having an issue with a select. I have a profile view that utilizes the profileCtrl. In that controller I get the users info from the db and put it into scope. I also use a service to grab all the info from the config table in the db and insert that into rootScope. My question and answers come from the config table (rootScope) the user's selected answer comes from the user info (scope). I need a select that preselects whatever answer the user has in the db. Below is my code.

Profile Controller:

app.controller('profileCtrl', function ($scope, $log, $http, $timeout, Data, Auth, dataShare, $sessionStorage, $rootScope, $confirm) {
$timeout(function() {

// get user's info from db and put it into scope
$scope.profs = data.data;
$scope.buttonText = 'Update Profile';

}, 100);

// get the configs from the configs service and put it in the rootScope
$rootScope.configs = data;

// get the answers from the config table for the select's options
$scope.availableAnswers = [
{ answer: $rootScope.configs[0].a1 },
{ answer: $rootScope.configs[0].a2 },
{ answer: $rootScope.configs[0].a3 },
{ answer: $rootScope.configs[0].a4 },
{ answer: $rootScope.configs[0].a5 }

// function executed on change from the select
$scope.selectedItemChanged = function() {

// inline edit title
$scope.updateUser = function(data) {
Data.put('config/'+data.id, {profile_page_title:data.profile_page_title}).then(function (result) {

$scope.saveProfile = function (profile) {

profile.roles = $rootScope.user.roles;

if(profile.uid.length > 0){
Data.put('profile/'+profile.uid, profile).then(function (result) {
$sessionStorage.user = profile;
$rootScope.user = $sessionStorage.user;
Data.post('profile', profile).then(function (result) {
$rootScope.name = profile.name


HTML: (I have condensed the code to be read easily)

<section class="row" id="" ng-repeat="profile in profs">
<div class="col-xs-12" id="questionWidget">


<!-- user's answer from db -->

<select ng-model="selectedAnswer" ng-change="selectedItemChanged()" ng-options="a.answer for a in availableAnswers">




Alright, so I made a plunk, and this is what I came up with. This will set the select option if the professor's current answer exists in the list.

The reason ng-init didn't work is because the selectedAnswer model is actually expecting to see an object with property 'answer'. In other words, selectedAnswer is the entire object, not just the answer itself.


    $scope.profs = [
        { answer: 'answer2' }

    $scope.availableAnswers = [
          { answer: 'answer1' },
          { answer: 'answer2' },
          { answer: 'answer3' },

   angular.forEach($scope.availableAnswers, function(availableAnswer){

     if ($scope.profs[0].answer === availableAnswer.answer)
      $scope.selectedAnswer = availableAnswer

-- Old Answer --

Have you tried ng-init?

ng-init="selectedAnswer = profs[0].answer"