Could someone please assist me in retrieving the selected value onchange of a dropdown box and then using that value as a variable in my controller? I am facing an issue where the $ColorPicked variable does not resolve in the $scope.base = response.data.type.$ColorPicked; statement. However, if I manually input "Red" instead of $ColorPicked, it works perfectly fine.
I am fairly new to Angular and JavaScript, so I apologize for any ignorance on my part. Despite extensively searching online, I have been unable to find a clear solution to this problem.
INDEX.HTML
<h3>Color:</h3>
<select class="formBoxes" id="ColorPicked">
<option value="Red">Redd</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
</select>
SCRIPT.JS
$ColorPicked = "Red";
var app = angular.module("computer",['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/main',{
templateUrl: 'archetype.html',
controller:'MainCtrl'
}).
otherwise({redirectTo:'/main'})
}])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$http.get('archetype.json').then(function(response){
$scope.base = response.data.type.$ColorPicked;
;
});
}]);