Angular.js with JsFiddle and dynamically changing a ng-controller value

Question

I am trying to write my first angular.js application and not use jQuery.

There are many REST calls each having its own ng-controller.

I am trying to change the value of the ng-controller in the DIV declaration to output the different REST results.

I have got the REST calls working and displaying the data, so now I want to use buttons to select which REST data to retrieve and display in the main DIV. I attempted to change the ng-controller value in the DIV. It changed the value, but it did not execute the new ng-controller function.

So to get help, I tried to create a jsFiddle, but I have made some fundamental errors as the buttons do not work, never mind the change of ng-controller with a new set of values. My initiation of angular controllers in jsFiddle are obviously wrong or missing.

Fiddle My jsFiddle Effort

There may be an alternative solution, but I have not been able to find one.

Answer 1

Try this clean code out, The nice structure for Angular JS

html

<div ng-app='myApp'>
    <div ng-controller="Controller">
        <button ng-click="clickRestOne()">Rest1 Call One</button>
        <button ng-click="clickRestTwo()">Rest2 Call Two</button>
        <hr></hr>
        <div style="width:50px;height:50px;" id="MainDiv">
            <p>{{emptyData}}</p>
        </div>
    </div>
</div>

script

var app = angular.module('myApp', []);
app.controller('Controller', function ($scope,  $http) {
    $scope.clickRestOne = function () {
        $http({
        method : 'GET',
        url : 'your url',
        }).success(function(data, status, headers, config)
        {   
            document.getElementById("MainDiv").innerHTML = data;        
        }).error(function(data, status, headers, config)
        {
        });
    }
     $scope.clickRestTwo = function () {
        $http({
        method : 'GET',
        url : 'your url',
        }).success(function(data, status, headers, config)
        {   
            document.getElementById("MainDiv").innerHTML = data;        
        }).error(function(data, status, headers, config)
        {
        });
    }
});

Answer 2

You shouldn't need to dynamically switch controllers like that. Here is a more standard way of doing what you are trying to do:

http://jsfiddle.net/robianmcd/v2cLS/

HTML

<div ng-app ng-controller="MyCtrl as ctrl">
    <button ng-click="ctrl.makeRestCall1()">Make Call 1</button>
    <button ng-click="ctrl.makeRestCall2()">Make Call 2</button>
    <hr>
    <p>{{ ctrl.dataFromLastRestCall }}</p>
</div>

JS

var MyCtrl = function($http) {
    this.$http = $http;
};

MyCtrl.prototype.makeRestCall1 = function() {
    //TODO: make call with http
    //this.$http.get(...);

    this.dataFromLastRestCall = "made rest call 1";
}

MyCtrl.prototype.makeRestCall2 = function() {
    //TODO: make call with http
    //this.$http.get(...);

    this.dataFromLastRestCall = "made rest call 2";
}

Also note that in Angular you rarely need to make your Javascript directly interact with the DOM. Using document.getElementById() is no better than using JQuery (for the most part).