Sam Bush Sam Bush - 11 months ago 36
AngularJS Question

how to pass a varible from an option from to my Controller?

Can someone show me how to gather the value select on.change of the dropdown box and then use that value as a varible in my controller.
for some reason the $ColorPicked varible will not revolve in the $scope.base =$ColorPicked; BUT if i just remove the $ColorPicked and type in Red it works no problem.

I am still very new to Angular and JS for that matter so please excuse my stupidity. I have Googled and Googled for a clear cut answer and I got nothing.

<select class="formBoxes" id="ColorPicked">
<option value="Red">Redd</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>

$ColorPicked = "Red";

var app = angular.module("computer",['ngRoute'])
.config(['$routeProvider', function($routeProvider){
templateUrl: 'archetype.html',

.controller('MainCtrl', ['$scope', '$http', function($scope, $http){

$scope.base =$ColorPicked;


Answer Source

There are two things,

(i)You need to have a $scope variable defined for the ColorPicked inorder to provide the default selection.

(ii)You need to have ng-model which gets bind to the variable. Pass the selected Color to the function using the ng-change directive


 <select ng-model="ColorPicked" ng-change="setItem(ColorPicked)">


function MyCtrl($scope) {
    $scope.ColorPicked = "Red";    
    $scope.setItem = function(opt) {
    $scope.base =opt;


Working Demo for your requirement