How to get data from XmlList Model

[guru007]

I am parsing following xml file:
<?xml version="1.0" ?>
<DISPLAY direction="left">
<VIDEO stream="rtsp://192.168.0.xxx/stream" />
<Platform DirectionIndication="REVERSE"/>
<ROUTE>
<route_no>1234</route_no>
<name>NDLS To GZB</name>
<distance>520</distance>
<stations>4</stations>
<currentstopIndex>0</currentstopIndex>
<STOPS>
<STOP no="3" name="GBJ" distance="96" periphery="OUT" platform="RIGHT" />
<STOP no="2" name="ASR" distance="87" periphery="OUT" platform="LEFT" />
<STOP no="1" name="DLI" distance="40" periphery="OUT" platform="RIGHT" />
<STOP no="0" name="NDLS" distance="20" periphery="IN" platform="LEFT" />
</STOPS>
</ROUTE>
</DISPLAY>

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.XmlListModel 2.0
import QtQuick.Layouts 1.3
Item {
    id:root
    visible: true
    width: 100
    height: 300
    property string total_station:
    XmlListModel {
        id: model
        source: "qrc:/files/display_right.xml"
        query: "/DISPLAY/ROUTE"
        XmlRole {
            id: total
            name: "stations"
            query: "string(@stations)"
        }
    }


    ListView {
        id: list
        width : 100
        height: 50
        model: model
        anchors.horizontalCenter: parent.horizontalCenter
        delegate:  Text {
            id: text1
            text: "stations = " + stations
        }
    }
    Rectangle {
        id: data
        width: 100
        height: 50
        anchors.top: list.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 0
        color: "blue"
        Text
        {
            text: " "
        }
    }
}
 1.I want  to show stations value in second Text object. How Can I get data from model?
2. How can I set this value as property of Item which has id as root ? 

[guru007]

I solved this problem by using proper XPath expressions . But there is another question:
My current problem is I am able to create Image elements with text shown on top which is loaded from Xml. But How Can I dynamically apply animation say opacity animation on some Image say At Index 5 from ListView.
This is Xml I am using:
<?xml version="1.0" encoding="UTF-8" ?>
<DISPLAY direction="right">
<VIDEO stream="rtsp://192.168.0.xxx/stream"/>
<Platform>STRAIGHT</Platform>
<ROUTE route_no="1234" name="NDLS To GZB" distance="520" stations="10" currentstopIndex="0">
</ROUTE>
<STOPS>
<STOP no="0" name="NDLS" distance="20" periphery="IN" platform="LEFT"/>
<STOP no="1" name="DLI" distance="40" periphery="OUT" platform="RIGHT"/>
<STOP no="2" name="ASR" distance="87" periphery="OUT" platform="LEFT"/>
<STOP no="3" name="GBJ" distance="96" periphery="OUT" platform="RIGHT"/>
<STOP no="4" name="AHBC" distance="20" periphery="IN" platform="LEFT"/>
<STOP no="5" name="JKL" distance="40" periphery="OUT" platform="RIGHT"/>

</STOPS>

</DISPLAY>

Here is updated code:

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.XmlListModel 2.0
import QtQuick.Layouts 1.3
Item {
    id: root
    property bool start_animation: false

    visible: true
    width: 1920
    height: 290

    XmlListModel {
        id: model
        source: "qrc:/files/display_right.xml"
        query: "/DISPLAY/STOPS/STOP[@no]"
        XmlRole {
            id: total
            name: "name"
            // query: "string(@stations)"
            query: "string(@name)"
            isKey: true
        }
        XmlRole {
            id: name
            name: "platform"
            query: "string(@platform)"
            isKey: true
        }

    }

Flickable {
    id: flick
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.leftMargin: 100
    anchors.topMargin: 50
    width: 1620; height: 290
         contentWidth: 1220; contentHeight: 290
         anchors.horizontalCenter: parent.horizontalCenter

    ListView {
        id: model_view
        width: 1220
        height: 290
        anchors.top: flick.top
        anchors.left: parent.left
        anchors.leftMargin: 100
        anchors.topMargin: 100
        anchors.horizontalCenter: parent.horizontalCenter
        orientation:  Qt.Horizontal
        model: model
        visible: true
        Behavior on y {
            NumberAnimation {duration: 2000}
        }
        delegate:Image
        {
            id: icon
            property int station_no : index
            source: "qrc:/icons/red_button.png" ;
            width: 100 ; height: 100;
            opacity: 1.0
            //Behavior on opacity {
                NumberAnimation {
                    id: icon_animation
                   target: model_view.itemAt(0,0)
                   property: "opacity"
                   duration: 2000
                   from: 0.01
                   to: 1.0
                   easing.type: Easing.InOutQuad
                  loops: Animation.Infinite
                 running: root.start_animation
            }
            Text{
               // anchors.bottom: icon.top
                anchors.centerIn: icon.Center
                anchors.bottomMargin: 2
                rotation: 300
                text: name
                font.pixelSize: 12
            }
        } 
    }
    }
Rectangle {
    id: button
    width: 50
    height: 50
    x: 0
    y: 20
    color: "red"
    //anchors.left: root.right
    //anchors.leftMargin: 20
    MouseArea
    {
        anchors.fill: parent
        onClicked: {
            root.start_animation = !    root.start_animation
        }
    }
}

}

I want to animate that Image Icon which will be received as "currentstopIndex" attribute.
say I received 3 as value for current stop, Then I want to change opacity from 0.01 to 1.0 of that Image within ListView.

[JonB]

@guru007
Since your new question is radically different from the title, you might stand a better chance of attracting answer if you make a fresh question.