Angular Example by Bennadel

http://www.bennadel.com/blog/2452-mixing-static-and-dynamic-data-in-an-angularjs-select-menu.htm

by Marko Keuschnig

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<div ng-app="Demo" ng-controller="DemoController">
    
<h1>
     Mixing Static And Dynamic Options In An AngularJS Select Menu
</h1>

    <form>
        <select ng-model="selection" ng-options="option.value as option.text for option in options">
            <!-- You can have ONE default, null selection option. -->
            <option value="">- - Make Selection - -</option>
        </select>
        <button type="button" ng-click="selectJoanna()">Select Joanna</button>
        <button type="button" ng-click="selectNull()">Select null</button>
    </form>
    <p ng-show="selectedFriend">{{ selectedFriend.id }} - {{ selectedFriend.name }}</p>
</div>

JavaScript

// Define our AngularJS application module.
var demo = angular.module("Demo", []);


// -------------------------------------------------- //
// -------------------------------------------------- //


// I am the main controller for the application.
demo.controller(
    "DemoController",

function ($scope) {
    // -- Define Scope Methods. ----------------- //
    // I explicitly select Joanna just to demonstrate how
    // the two-way data binding will behave. Once we
    // select Joanna explicitly, the ngModel will reflect
    // that change in the Select menu.
    $scope.selectJoanna = function () {

        $scope.selection = $scope.friends[1];

    };


    // One more demo to show how selection will be
    // reflected in two-way data binding.
    $scope.selectNull = function () {

        $scope.selection = null;

    };


    // -- Define Scope Variables. --------------- //

    // I am the "dynamic" data portion of the select menu.
    // Dynamic in the sense that it may have come from a
    // data source and we don't know who big the list is.
    $scope.friends = [{
        id: 1,
        name: "Tricia"
    }, {
        id: 2,
        name: "Joanna"
    }, {
        id: 3,
        name: "Sarah"
    }];


    // I am the "static" data portion of the select menu.
    // This will be hard-coded in our Controller and used
    // to facilitate selection.
    $scope.staticOptions = [{
        value: "random",
        text: "Random Friend"
    }, {
        value: "hrule",
        text: "- - -"
    }];


    // When it comes to populating the Select options,
    // we can't simply feed in the collection of friends
    // because, well, that's not what that list is. Sure,
    // it *contains* friends; but, it's NOT a list of
    // friends. As such, we need to create a separate list
    // of options that houses BOTH our dynamic data and
    // our static data.
    //
    // As we do this, we want to map Friend collection
    // onto a collection that mimics...