Unable to access variable outside ng-model in AngularJS

Question

I just started playing with angularJS today and I am a little stumped at why I can only access my variable in a certain area in my code. In the area below the selectbox, which picks a file from an array, the variable {{ fileInfo }} displays fine and my console log shows the value is there, however the value does not display in the second panel - Can anyone explain where I am going wrong, why it does not appear and how to fix it! Here is the HTML I have created, thanks for your time.

<div class="col-md-6">
    <div class="panel panel-default" ng-controller="FileInfo">
        <div class="panel-heading">
            <h3 class="panel-title">Files</h3>
        </div>
        <form class="form-inline padding-left">

            <select class="form-control padding-left" name="selectedFile" ng-model="fileSelection" ng-change="FileInfo()" ng-options="opt.filename as opt.basename for opt in files">
            </select>
            {{ fileInfo }}
        </form>
    </div>
</div>
<div class="col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">File Info</h3>
            <br> {{ fileInfo }}
        </div>

Answer 1

It seems from your question that you want to display {{fileInfo}} twice.

I would create a container div around both your divs and put the ng-controller on container div.

<div class="container" ng-controller="controller1>

    <div class="col-md-6"> <!-- Stuff --> {{fileInfo}} </div>
    <div class="col-md-6"> <!-- Stuff --> {{fileInfo}} </div>

</div>