AngularJS Adding additional Values to Option Select

I'm currently developing an AngularJS application.

What I'm trying to achieve:

I want the user to be able to select an address from the select dropdown and for this data to be passed to the next stage.

Current Problems:

I need to limit the amount of data show per address option - House Number, Street Name & Post Code.

I need to be able to allow the user to select an address and pass the data (on change) to the next section showing the results and the additional hidden information from the selected address - Area, Locality etc.

Here is my code below, I've been advised todo it like this by Vineet.

Any help / advice would be helpful!



HTML - Part One ( Select Address ) 

<form class="introForm" id="introForm" name="introForm">
    <label class="item noborder"><select>
        <option data-addressone="{{address['Address 1']}}" data-addresstwo=
        "{{address['Address 2']}}" data-area="{{address.Area}}" data-day=
        "{{address.Day}}" data-locality="{{address.Locality}}" data-number=
        "{{address.Number}}" data-postcode="{{address.Postcode}}"
        data-streetname="{{address.Streetname}}" data-week=
        "{{address.Week}}">
            {{address.Number}} {{address['Address 1']}} {{address['Address
            2']}} {{address.Postcode}}
        </option>
    </select></label> <button class="button submit">Next</button>
</form>



Controller 

$scope.addressSelect = function() {
    var angElement = angular.element(document.querySelector('select option'));
    $scope.introData.confirmAddress.number = angElement.attr('data-number');
    $scope.introData.confirmAddress.addressone = angElement.attr(
        'data-addressone');
    $scope.introData.confirmAddress.addresstwo = angElement.attr(
        'data-addresstwo');
    $scope.introData.confirmAddress.streetname = angElement.attr(
        'data-streetname');
    $scope.introData.confirmAddress.area = angElement.attr('data-area');
    $scope.introData.confirmAddress.locality = angElement.attr(
        'data-locality');
    $scope.introData.confirmAddress.locality = angElement.attr(
        'data-postcode');
    $scope.introData.confirmAddress.day = angElement.attr('data-day');
    $scope.introData.confirmAddress.week = angElement.attr('data-week');
}



HTML - Part Two ( Displaying Selected Results ) 

<div class="item noborder nopadding confirmAddress">
    <p><span>{{introData.fullname}}</span>
    <span class="email">{{introData.email}}</span>
    <span>{{introData.confirmAddress.number}}</span>
    <span>{{introData.confirmAddress.addressone}}</span>
    <span>{{introData.confirmAddress.addresstwo}}</span>
    <span>{{introData.confirmAddress.streetname}}</span>
    <span>{{introData.confirmAddress.area}}</span>
    <span>{{introData.confirmAddress.locality}}</span>
    <span>{{introData.confirmAddress.postcode}}</span></p>
</div>

enter image description here enter image description here

You should not use the DOM to store your data. The data is in the model, i.e. in the scope of the controller, and that's where you should find it.

You should use the ng-options directive to generate your options. Assuming the addresses are in $scope.addresses, the code would simply look like:

<select ng-model="selectedAddress" ng-options="(address.Number + ' ' + address['Address 1'] + ' ' + address['Address
        2'] + ' ' + address.Postcode) for address in addresses"></select>

Then, thanks to ng-model, the complete selected address (i.e. the address object itself) will be stored by angular in $scope.selectedAddress, every time the user makes a selection.

So, to display the selected address, all you need now is

<span>{{selectedAddress.number}}</span>
<span>{{selectedAddress['Address 1']}}</span>
<span>{{selectedAddress['Address 2']}}</span>
<span>{{introData.streetname}}</span>
...

No need to do anything in the controller. And no need to store anything in data attributes: the data is in the model.