Angular JS in general javascript node

Hello Sir, 

I am trying to implement AngularJS using require function, but the problem is app function is not called only, the line where angular starts is not getting executed, please have a look at my code below:

I appreciate your help

var data = [];
var colNames = [];
var noOfColumns = knimeDataTable.getNumColumns();
var noOfRows = knimeDataTable.getNumRows();
var lineColumns = new Array(noOfColumns);
var parentTitle = "Parent Title"; //provide parenr title here
var chartTitle = ""; //Provide chart title here
var chartSubTitle = "Muliple Box Plots (title)"; //Provide chart sub-title here
var xAxisTitle = "x axis";//Provide chart's x axis title here
var yAxisTitle = "y axis";//Provide chart's y axis title here
var note = "your text comes here"; //Note for explaining the chart
for (var i = 0; i < noOfColumns; i++) {
  lineColumns[i] = new Array(noOfRows);

for (var rowID = 0; rowID < noOfRows; rowID++) {
    var singleObj = {};
        for (var colID = 0; colID < noOfColumns; colID++) {
        var colName = knimeDataTable.getColumnNames()[colID];
        colNames[colID] = colName;
        var row = knimeDataTable.getRows()[rowID];
        singleObj[colName] =[colID];
        var colData =[1];
var key = function(data) {
    return data.key;

            "angularJS" :"",
require(['angularJS','underscore'], function(){
    //appending HTML elements 
    var mDiv = $('<div ng-app="myApp">');
    var parentDiv = $('<div class="parent-div"  ng-controller="myCtrl">');
                    //binding the value of dropdown (input) to variable in angular and calling function on change of dropdown
    var dropdown = $('<select class="select-list" id="list" ng-model="mySelect" ng-change="showSelectValue(mySelect)"><option ng-repeat="n in numbers track by $index">{{n}}</option></select>');
    var table = $('<table id="sample-table"></table>');
    var jsonKeys = _.allKeys(data[0]); //getting JSON keys
    var columnHeaders = $('<tr>'); //defining row for headers
    for(var i=0;i<jsonKeys.length-1;i++){
    $(table).append(columnHeaders); //appending headers to headers
    var columnValues = $('<tr ng-repeat="x in filteredObject">'); //defining row for column values
    for(var i=1;i<jsonKeys.length;i++){
        columnValues.append('<td>{{ x.'+jsonKeys[i]+'}}</td>'); //appending column to row
    $(table).append(columnValues); //appending row with with column values

    var currentValue="";
    //defining module and controller for angular
    var app = angular
                .module('myApp', [])
                .controller('myCtrl', function($scope) {
                    //getting JSON keys and data for dropdown
                    var jsonKeys = _.allKeys(data[0]);
                    var dropdownData = _.uniq(_.pluck(data,jsonKeys[0]));
                    //assigning array for dropdown
                    $scope.numbers = dropdownData;
                    $scope.mySelect = $scope.numbers[0]; //setting 1st value of array to dropdown
                    //getting selected value of dropdown on change
                    $scope.showSelectValue = function(mySelect) {
                        currentValue = mySelect;
                    //function for filtering JSON object based on selected value in dropdown
                    function filterTableData(currentDropdownValue){
                        $scope.filteredObject = _.filter(data, function(key){ //filter function for filtering JSON data
                            return == currentDropdownValue;


Thank you.


I had a quick look at your code and from first glance everything looked correct. However, I found a problem when trying to pass in tables that contained columns with spaces in the column name.

Error: [$parse:syntax] Syntax Error: Token 'Membership' is an unexpected token at column 11 of the expression [x.Cluster Membership] starting at [Membership].$parse/syntax?p0=Membership&p1=is%20an%20unexpected%20token&p2=11&p3=x.Cluster%20Membership&p4=Membership
    at AST.throwError (
    at AST.ast (
    at ASTCompiler.compile (
    at Parser.parse (
    at $parse (
    at $interpolate (
    at addTextInterpolateDirective (
    at collectDirectives (
    at compileNodes (

After renaming the column to something without columns it worked fine where the empty alert was shown, as well as the select dropdown correctly filled.

Thank you for your reply, but as I have re checked my data, my data doesn't contains any spaced in column names, is it something that this code is unable to find the "ng-app" directive in main div?, because this code does not run the angular part. Can you please again check and help me in solving it?