Using AngularJS to automatically set the selected option from the model

Current Angular version - 1.2.28 (Legacy, pending upgrade)

I'm currently facing an issue with setting the default selected value for a select element based on the model value.

In my Controller, I have this code snippet;

$scope.customer.country = 'GB';

And in my view, I have a select element like this;

<select
    ng-model="customer.country"
    ng-options="country as country.name for country in countries track by country.alpha2">
</select>

My expectation was that if there's an object in the 'countries' array with the alpha2 value of 'GB', it would be automatically selected upon rendering.

However, the actual behavior is that the default option appears empty.

Can you help me understand how to set the default selected value using the model (ng-model) value?

Answer №1

Initialization appears to be incorrect

$scope.user.location = 'USA';

You need to initialize it with the same object from the array that is bound (locations)

The correct implementation should resemble:

$scope.user.location = $scope.locations[0];

CodePen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for integrating Basic Javascript into a Nextjs project

As a novice in Nextjs, I am attempting to incorporate a basic JavaScript function like this: document.addEventListener("scroll", function () {console.log("scroll!")}) How can I add this function in a local file and then load it using <script/> in Ne ...

Invoke a bounded function within an Angular directive using the ng-click event

I was wondering if it's possible to invoke a bound function within a directive by clicking on a specific part of a div. Currently, I have a div with an inner div that acts as a button for expanding the main div. The larger div has a directive associat ...

Replicating radio button functionality using buttons in an HTML document

I am attempting to simulate radio button behavior using normal buttons for a quiz application. Currently, my code is working as intended and permanently highlights buttons with the desired color. However, I want all other buttons in a question to be white, ...

Tips for safeguarding the security of my PHP API when accessed through Ajax using OAuth2

I've developed a cross-origin ajax application that utilizes some personal APIs I created. Now, I'm looking to enhance the security measures so only my application has access to the API. After researching, I came across OAuth2 at OAuth2. I foll ...

How can I change the attributes of icon().abstract.children[0] in the fontawesome-svg-core api?

The issue at hand: The icon() function within the fontawesome-svg-core API is setting default properties for SVG children elements that require custom modifications. My objective: The outcome of the icon() method is an object with an "html" property, co ...

Issue encountered when attempting to post form data in MEAN stack

Greetings everyone, I am in the process of creating a basic registration page using mongodb, node, express, mongoose, and angularJS. I'm facing challenges understanding how all the components relate to each other and how to connect them properly. B ...

Ensure the content is optimized for all screen sizes, utilizing Bootstrap to adapt accordingly

I have a webpage with a header, a footer, and a container id="item" that contains a list of four items with their respective logos. I am attempting to make the item container responsive based on the screen size so the entire page fits the screen without re ...

Adjusting the ContentChildren attributes within the QueryList modification

Let's imagine a scenario where a parent component has @ContentChildren(Child) children. Each individual Child, in its component class, includes an index field. I want to ensure that these index fields remain accurate whenever there is a change in the ...

Transforming a group of JSON objects into a two-dimensional array

Below is an array of JSON objects: var data = [{ 1: { name: 'Name 1', id: 'one' } }, { 2: { name: 'Name 2', id: 'two' } }]; I want to transform this into a 2-D array like this: var newData ...

Display the HTML content as a string using jQuery

I am working with JS code that uses jQuery to display errors from an array in a bootstrap container: var errors = [{ "Message": "The source document is not valid. Please see the 'Schema Validation Issues' section above at column &1, line ...

Steps for submitting a form once all inputs have been verified

$('#f_name, #l_name').change(function(){ if($(this).val().length < 2) { $(this).css('border', '1px solid red'); alert('names must be at least 2 symbols'); check ...

Generating Objects from Database Data Using JavaScript Automatically

I have a specific task at hand. My goal is to extract data from a database, generate a new user, and continuously monitor for new users and updates in the location of existing users (I am tracking GPS using an Android mobile app). The challenge lies in cre ...

What is the best way to navigate to a specific location on a web page?

After clicking the "Add comment" link, a comment form popped up using Ajax. I now need assistance with scrolling to it, can you please help me out? ...

The functionality of clicking on elements in Selenium is limited to running in debug mode

I have developed a test that simulates clicking on element X. This specific element is only displayed after another button is clicked, and these elements are linked by using ng-hide. When attempting to execute my code, the click on element X does not ...

Mastering the perfect synchronization of useState and useEffect

I'm struggling with comparing the values of two inputs, specifically for a password and confirm password input in a form. While using onChange in React useState to render the DOM is straightforward, I know that I should be utilizing useEffect as well ...

Initiating a SOAP WSDL request

Looking to create a Request for Comment (RFC) using a SAP function. A SAP data source was generated from this function. Upon visiting the following address: , a page with XML definitions is displayed. <?xml version="1.0" encoding="UTF-8&q ...

Having trouble with Bootstrap v4 dropdown menu functionality?

For some reason, I cannot get the dropdown menu to work in my Bootstrap v4 implementation. I have tried copying and pasting the code directly from the documentation, as well as testing out examples from other sources on separate pages with no luck. &l ...

Splunk bubble diagram - a unique way to visualize data

I'm attempting to generate a bubble chart in Splunk using the code below: <dashboard> <label>Bubble Chart</label> <row> <panel> <chart> <searchString>index = _inter ...

Implementing a fixed width and height for the owlslider in Angular 4 with owl-carousel

I am facing an issue with the owl-carousel Angular plugin. I am unable to display images larger than 194px x 145px on my website. The image dimensions need to remain consistent across all sizes. Despite trying to override the image dimensions in CSS using ...

Redux export does not complete correctly unless brackets are used

I'm trying to understand why the main JS file is having trouble importing todo from './actions' without brackets, while there are no issues with importing todos from './reducers'. Main js-file: import { createStore } from 'r ...