In this article we will explain how to use ng-option in AngularJS or what is ng-option in AngularJS or how to bind drop down list using ng-option in AngularJS with example.




The AngularJS ng-option directive use to fill data in dropdown lists based on an array or an object. You can alson use ng- repeat directive to fill data in dropdown lists based on an array or an object.

  • Example ng-option
    ViewBag.Title = "Home Page";
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<div ng-app="mainApp" ng-controller="MyController">  
        <table border="0">
                <td colspan="2" ><h2>AngularJS ng-options</h2></td>
                <td>Select :</td>
                    <select ng-model="data.SelectedValue" ng-options=" as for x in data.values" style=" width:300px; height:30px;"></select>
                <td>Selected Value: </td>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('MyController', function ($scope) {
        $ = {      
            SelectedValue: null,
        values:[{ id: '1', name: 'Option A' },
                 { id: '2', name: 'Option B' },
                 { id: '3', name: 'Option C' },
                 { id: '4', name: 'Option D' },
                 { id: '5', name: 'Option E' }]
    table {
        margin:0 auto;
     table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
        table tr:nth-child(odd) {
            background-color: #ccc;
        table tr:nth-child(even) {
            background-color: #ffffff;


  • Result:

what is ng-option in AngularJS

what is ng-option in AngularJS

I hope this article will help to you.

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like