AngularJS not writing $scope variables to view

Question

I have a very strange issue. Using AngularJS 1.5.8. With previous versions it didn't work either. Functions like ng-bind, ng-model, ng-submit work fine.

Click on "Inschrijven" http://adr-opleiding.ismiami.com/, second step "Postcode" and enter e.g. 1000. It will display Amsterdam. I used a div element w/ ng-bind="city". If I use {{city}} it will always display {{city}}. I can't get it to update from a controller.

angular.module('app', []).controller('HomeController', ['$rootScope', '$scope', '$stateParams', function($rootScope, $scope, $stateParams) {
$scope.$on('$viewContentLoaded', function() {
    $scope.app.settings.htmlClass = $stateParams.htmlClass.website;
    $scope.app.settings.bodyClass = '';
});
}])
.controller('WizCtrl', ['$scope', '$http', function($scope, $http) {
$scope.city = '';

$scope.printCity = function(){

    if($scope.postcode.length == 4) {
        $http({
            method: 'POST',
            url: '/db/get.php',
            data: {  action: 'retCity', zip: $scope.postcode }
        })
        .then(function success(response) {
            $scope.city = response.data.city;
        }, function error(response) {

        });
    }
}
}]);

And here's the HTML:

              <div class="form-group">
                <label for="wiz-postcode" class="col-xs-4 control-label">Postcode:</label>
                <div class="col-xs-3">
                  <input class="form-control" type="text" name="wiz-postcode" id="wiz-postcode" style="width: 80px;" placeholder="Postcode" ng-keyup="printCity()" ng-model="postcode" onblur="this.value=this.value.toUpperCase()" />
                </div>
                <div class="col-xs-5" ng-bind="city" style="padding-top: 8px; font-size: 1.1em;"></div>
              </div>

At the very top of the HTML I have a div element w/ the controller:

<div ng-controller="WizCtrl">

So the question is how come that $scope variables work fine for everything except updating the view w/ a variable like this {{test}}

Could it be something with how the HTML template is loaded? Does it do the same thing when it is not in the modal, and just in a simple flat HTML? — plong0, Aug 26 '16 at 17:01
http://adr-opleiding.ismiami.com/ see {{test}} This is from the main controller. angular.module('app') .controller('AppCtrl', [ '$scope', '$state', function ($scope, $state) { $scope.app = { settings: { htmlClass: '', bodyClass: '' } }; $scope.test = 'xxx'; — M. Stam, Aug 26 '16 at 18:07

score 0 · Answer 1 · edited May 23 '17 at 12:08

A new Google search "angularjs variables in braces not working" got me to AngularJS-Twig conflict with double curly braces from which I learned that w/ AngularJS you can set the symbols w/ the variables start and endSymbol

    var app = angular.module('app')
    .config(
    [ '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$interpolateProvider',
        function ($controllerProvider, $compileProvider, $filterProvider, $provide, $interpolateProvider) {
            app.controller = $controllerProvider.register;
            app.directive = $compileProvider.directive;
            app.filter = $filterProvider.register;
            app.factory = $provide.factory;
            app.service = $provide.service;
            app.constant = $provide.constant;
            app.value = $provide.value;

            $interpolateProvider.startSymbol('::');
            $interpolateProvider.endSymbol('::');
        }
    ]);

AngularJS not writing $scope variables to view

1 Answers1