AngularJS unable to pass variable to HTML page

Question

The datasets variable exists (I can see it w/ console.log()), but it is not getting passed to the html page. I set up the controller and app correctly, I believe, but can't figure out what I'm doing wrong. Left out other code that shouldnt have an impact on this to make it easier to read.

<!DOCTYPE html>
<html lang="en" ng-app="ValidationApp">

<body ng-controller="Test1">

 <div class="container-fluid" style="position:absolute;">

                    <div class="btn-group-vertical text-center pull-left">
                        <h3>Data Visualization</h3>
                        <button type="button" class="btn-danger" id="visualize" data-toggle='modal' data-target='#d3_choose' onclick="runfile('visualize','')"><i class="fa fa-area-chart"></i>  Visualize Results</button><br>
                    </div>

                </div>
                <div style="height:70vh;font:16px/26px Georgia, Garamond, Serif ;overflow:auto; background-color:white;padding-top:30px;position:absolute;margin-left:-40px;" class="col-lg-7 col-lg-push-3">
                    <pre>{{message1}}
                </div>

            </div>
    </div>
<div id="d3_choose" class="modal fade" role="dialog" ">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color:rgba(147, 147, 147, .5);">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title style1" style="font-size:24px;">Choose the Validation results to visualize</h4>
            </div>
            <div class="modal-body" p>
                <!--<form class="form-group" name="file_used" id="file_used">-->
                        <label ng-repeat="dataset in datasets">Choose a dataset
                            <input type="radio" ng-value="dataset" value="dataset">
                                   <!--name='results_file' ng-model="results_file" required>-->
                            {{dataset}}
                        </label><br>
                        <h3 ng-show="datasets.length==0">No validation results available using {{folder_name}} folder.</h3><br>
                <!--</form>-->
                <button type="button" class="btn-danger" id="visualize2" data-toggle='modal' data-target='#d3_viz'
                        ng-disabled="file_used.$invalid" onclick="data_viz('file_used')"><i class="fa fa-check"></i>  Visualize</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Exit</button>

            </div>
        </div>

    </div>
</div>

    $(".modal").on("hidden.bs.modal", function(){
        $(".modal-body input").val("")
        $(".modal-body select").val("")
    });

    ////////////////////////////////////////
    var app=angular.module('ValidationApp',[]);

        app.controller('Test1', function($scope,$http) {
            //will find current ip address wo hardcoding
            var socket = io.connect();

            socket.on('messages', function(data) {
                if ($scope.message1 == null) {
                    $scope.$apply(function(){$scope.message1 = data})
                } else {
                  $scope.$apply(function(){$scope.message1 = $scope.message1 += data;})
                }
            });

            socket.on('file_list', function(data) {
                $scope.$apply(function () {$scope.folder_name = data[0]})
                data.shift()
                $scope.$apply(function () {$scope.datasets = data})
            });

You may need to create a service. Refer stackoverflow.com/questions/17747104/… — Vijay Venugopal Menon
– Vijay Venugopal Menon, Commented Oct 20, 2017 at 15:56
The message1 variable does show up in the html page correctly though , so the $scope.apply should be sufficient. added the html code for that. — user3711502
– user3711502, Commented Oct 20, 2017 at 18:09
added that to see if i needed to define those elements locally (for the modal). didnt make a difference either way. — user3711502
– user3711502, Commented Oct 20, 2017 at 18:13

user441521 · Accepted Answer · 2017-10-20 16:30:39Z

0

Do you mean to have 2 ng-apps defined and the same ng-controller defined 2 different times?

answered Oct 20, 2017 at 16:30

user441521

7,03826 gold badges100 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3711502 Over a year ago

added that to see if i needed to define those elements locally (for the modal). didnt make a difference either way.

Collectives™ on Stack Overflow

AngularJS unable to pass variable to HTML page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related