Javascript and Angular noob here.

This is my 'chartController'. What this does is get iot data from back-end call and display it in my frot-end with a chart. The chart has addData and a remove function. These function make it so that the chart gets 'new' data to the right of the chart and removes 'data'on the left. This is what i have so far. If someone could give me tips on how:

• to make my controller less stacked, get data -> draw chart -> update chart.
• to make the get method more generic. The URL is now hardcoded.

.

var vm = this;
vm.content = [];
vm.dataContent = [];

$http({
  method: 'GET',
  url: 'http://localhost:8080/data/Living Room'
})
  .then(function successCallback(response) {

    JSON.stringify(response.data);

    angular.forEach($scope.content, function (value) {
      vm.dataContent.push(value.inputData);

    });

    $scope.content = response.data;

    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");

    var dataChart = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
        label: "Testing my Set",
        data: vm.dataContent
      }]
    };;


    var settings = {
      type: "line",
      data: dataChart
    };

    var myNewChart = new Chart(ctx, settings);


    function addData(chart, data, label) {
      chart.data.labels.push(label);
      chart.data.datasets.forEach(function (dataset) {
        dataset.data.push(data);
      });
      chart.update();

    }

    function remove(chart) {
      chart.data.labels.shift();
      chart.data.datasets.forEach(function (dataset) {
        dataset.data.shift();
      });
      chart.update();
    }

    setInterval( function(){
      
      addData(myNewChart, 16,  'working on it');

      // Remove the first point so we dont just add values forever
      remove(myNewChart);
    }, 5000);



  }, function errorCallback(response) {
    return alert(response.status)
  });