javascript - angular data binding with passed params -

furthering project having hiccup databinding.

the change in data not getting reflected on dom

i've constructor function inside js function/object.

constructor: function() {     var self = this;     var navigation = angular.module("navigation", []);     navigation.controller("productidscontroller", function($scope) {         $scope.productids = self.productids;     });     angular.bootstrap(document.getelementbyid('navigation'), ['navigation']); } 

and product id's defined on same level

productids: ["abc", "xyz", "test"], //dom gets populated array via angular  init: function(productids) {     console.log(this.productids); // displays ["abc", "xyz", "test"]     this.productids.push("another item"); //this didn't work on dom either     this.productids = productids; //i changed productid's passing array     console.log(this.productids); //the array got changed dom still same,  } 

html

    <div id="navigation">         <ul data-ng-controller="productidscontroller">             <li data-ng-repeat="productid in productids">{{productid}}</li>         </ul>     </div> 

initially dom gets populated given array, it's not changing after pass in array. how can have data bind productid's in given scenario?

edit: js fiddle

http://jsfiddle.net/casadev/n50ecw5m/

when change value outside of scope, have call $scope.$apply() explicitly. https://docs.angularjs.org/guide/scope

update

http://jsfiddle.net/qv31awmq/2/

puremvc.define({     name: "modules.search.view.components.navigation",      constructor: function () {         var self = this;         var navigation = angular.module("navigation", []);         navigation.controller("productidscontroller", function ($scope) {             self.$scope = $scope;             $scope.productids = self.productids;         });         angular.bootstrap(document.getelementbyid('navigation'), ['navigation']);     } }, {     delegate: null,     $scope: null,     productids: ["abc", "xyz", "test"],      init: function (productids) {         var self = this;         // http://stackoverflow.com/questions/25941124/angular-data-binding-with-passed-params/25941351#25941351         self.productids.length = 0;         angular.foreach(productids, function (entry) {             self.productids.push(entry);         });         self.$scope.$apply();     } }, {});  var nav = new modules.search.view.components.navigation(); nav.init(['foo', 'bar']);