ng-init is not setting my default category in my select within my Angular app

Question

I have the exact same problem as mentioned here: How to have a default option in Angular.js select box

However none of the answers fix my issue below, I'm trying to get the first category to show up inside of the select:

<p>Choose a tag category:</p>
<div class="select-style">
    <select ng-model="modal.addedTag" ng-init="modal.addedTag = modal.categories[0].name" ng-options="category.name for category in modal.categories">
        <!-- <option value="brand" selected>Brand</option> 
        <option value="client">Client</option>
        <option value="company-name">Company Name</option>
        <option value="government">Government</option>
        <option value="events">Events</option>
        <option value="industry">Industry</option>
        <option value="products">Products</option>
        <option value="news">News</option> -->
    </select>
</div>

Model in my Controller:

var vm = this;
vm.categories = [
    { name: 'brand' },
    { name: 'client' },
    { name: 'competitor-name' },
    { name: 'company-name' },
    { name: 'government' },
    { name: 'events' },
    { name: 'industry' },
    { name: 'people' },
    { name: 'philanthropic' },
    { name: 'products' },
    { name: 'product-category' },
    { name: 'product-feature' },
    { name: 'place' },
    { name: 'problem' },
    { name: 'news' },
    { name: 'related-company-name' },
    { name: 'trend' }
];

`ng-options` is suppose to act just like `ng-repeat` I actually just simply fixed this problem, by setting the default `ng-model`. — Leon Gaban, Apr 01 '16 at 19:31
It's worth noting that this is the incorrect usage of ng-init, per the docs. This easily could be (and should be) done in a controller. — David L, Apr 01 '16 at 19:32
you use `modal.categories[0].name` but you declared the `categories` variable on `vm`? — Tjaart van der Walt, Apr 01 '16 at 19:33
modal is was the directive `syntax as` keyword, I don't use $scope — Leon Gaban, Apr 01 '16 at 22:51

Shaishab Roy · Answer 1 · 2016-04-01T19:44:56.923

2

can try initialize vm.addedTag from controller instead of in DOM

vm.addedTag = vm.categories[0].name; // after your categories array

and in html use only ng-model no need to use ng-init and use category.name as category.name

<select ng-model="modal.addedTag" ng-options="category.name as category.name for category in modal.categories"></select>

edited Apr 01 '16 at 19:44

answered Apr 01 '16 at 19:36

Shaishab Roy

15,447
4
47
66

Hadi J · Accepted Answer · 2016-04-01T20:05:16.587

try this in controller.

if you use ng-options="category.name for category in modal.categories" select tag then init vm.addedTag = vm.categories[0]; in controller. and also use ng-options="category.name as category.name for category in modal.categories" in select tag then init vm.addedTag model as this vm.addedTag = vm.categories[0].name;

var myapp = angular.module('app', []);
myapp.controller('Main', function ($scope) {
 var vm = this;
vm.categories = [
    { name: 'brand' },
    { name: 'client' },
    { name: 'competitor-name' },
    { name: 'company-name' },
    { name: 'government' },
    { name: 'events' },
    { name: 'industry' },
    { name: 'people' },
    { name: 'philanthropic' },
    { name: 'products' },
    { name: 'product-category' },
    { name: 'product-feature' },
    { name: 'place' },
    { name: 'problem' },
    { name: 'news' },
    { name: 'related-company-name' },
    { name: 'trend' }
];
  vm.addedTag = vm.categories[0];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
  <div ng-controller="Main as modal">

<div class="select-style">
    <select ng-model="modal.addedTag"  ng-options="category.name for category in modal.categories">
       
    </select>
</div>
   </div>
</div>

ng-init is not setting my default category in my select within my Angular app

2 Answers2