a simple select input is not working properly with angular-meteor

Question

this is a weird thing:

using angular-meteor library

put a simple select input on the page:

<div id="category">
<select ng-model="selectedItem">
<option ng-repeat="p in inputCategories" value="{{p.name}}"></option>
</select>
</div>

select itself shows up, it has the correct number of options, but the actual option text is invisible!

When inspected, it shows the following:

<select class="ng-pristine ng-valid ng-touched" ng-model="selectedItem">

    <option value="? undefined:undefined ?"></option>
    <!--

     ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Cost Source Actuals" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Cost Source Budget" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Chart of Accounts" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Cost Center Master" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Headcount by Department Cost Center Labor" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Fixed Asset Register" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="AccountView Inventory" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="DC Facilities" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="GL accounts" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="NextGen data" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Profit and Loss data" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->
    <option class="ng-scope" value="Vendors" ng-repeat="p in inputCategories"></option>
    <!--

     end ngRepeat: p in inputCategories 

    -->

</select>

and here is the controller:

angular.module("collector").controller("CollectorCtrl", ['$scope', '$stateParams', '$meteor',
    function($scope, $stateParams, $meteor, $location){

        $scope.inputCategories = [
            {
                name: 'Cost Source Actuals'
            },
            {
                name: 'Cost Source Budget'
            },
            {
                name: 'Chart of Accounts'
            },
            {
                name: 'Cost Center Master'
            },
            {
                name: 'Headcount by Department Cost Center Labor'
            },
            {
                name: 'Fixed Asset Register'
            },
            {
                name: 'AccountView Inventory',
                collectionName: 'AccountView_Inventory'

            },
            {
                name: 'DC Facilities',
                collectionName: 'DC_Facilities'

            },
            {
                name: 'GL accounts',
                collectionName: 'GL_accounts'

            },
            {
                name: 'NextGen data',
                collectionName: 'NextGen_data'

            },
            {
                name: 'Profit and Loss data',
                collectionName: 'Profit_and_Loss_data'

            },
            {
                name: 'Vendors'
            }
        ];


    }]);

Would anyone have any idea of what this may be?

Answer 1

The text given inside option tag will shown in your option. You missed to add text inside option tag.

Markup

<select ng-model="selectedItem">
    <option ng-repeat="p in inputCategories" value="{{p.name}}">{{p.name}}</option>
</select>