ng-options issue in angular js

Question

I am new to angular js and trying to add options to select using angular but facing issue :

Following is the code

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var mymodule = angular.module("firstform",['$scope']);


mymodule.controller("selectgroupcontroller",['$scope', function($scope){
        
       // $scope.optgrps = selectGroupFactory.optgrps;
        $scope.optgrps = [
                                {name : 'First', value : '1', group : '1-3'},
                              {name : 'Second', value : '2', group : '1-3'},
                              {name : 'Third', value : '3', group : '1-3'},
                              {name : 'Fourth', value : '4', group : '4-6'},
                              {name : 'Fifth', value : '5', group : '4-6'},
                              {name : 'Sixth', value : '6', group : '4-6'},
                              
                              
                             ] ;
}]); 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-app="firstform">
  <div class="col-sm-12">
    <form name="selecttest" novalidate="" ng-controller="selectgroupcontroller">
      <div class="form-group">
        <div class="control-label text-center col-sm-2">
          <label for="selectgrp">Select Value: </label>
        </div>
        <div class="col-sm-10">
          <select class="form-control" ng-model="selectedVal" id="selectgrp" ng-options="val.value as (val.name+val.value) group by val.group for val in optgrps">

          </select>
        </div>
      </div>
    </form>


  </div>
</div>

Code is simple to add groups for select options and the print. But it is not giving any error and not giving any output either.

Answer 1

it gives error Error: [$injector:modulerr] remove $scope module inject

var mymodule = angular.module("firstform",[]);

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

var mymodule = angular.module("firstform",[]);


mymodule.controller("selectgroupcontroller",['$scope', function($scope){
        
       // $scope.optgrps = selectGroupFactory.optgrps;
        $scope.optgrps = [
                                {name : 'First', value : '1', group : '1-3'},
                              {name : 'Second', value : '2', group : '1-3'},
                              {name : 'Third', value : '3', group : '1-3'},
                              {name : 'Fourth', value : '4', group : '4-6'},
                              {name : 'Fifth', value : '5', group : '4-6'},
                              {name : 'Sixth', value : '6', group : '4-6'},
                              
                              
                             ] ;
}]); 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-app="firstform">
  <div class="col-sm-12">
    <form name="selecttest" novalidate="" ng-controller="selectgroupcontroller">
      <div class="form-group">
        <div class="control-label text-center col-sm-2">
          <label for="selectgrp">Select Value: </label>
        </div>
        <div class="col-sm-10">
          <select class="form-control" ng-model="selectedVal" id="selectgrp" ng-options="val.value as (val.name+val.value) group by val.group for val in optgrps">

          </select>
        </div>
      </div>
    </form>


  </div>
</div>