AngularJS Promise & atop Filter. Failed to execute 'atob' on 'Window'

Question

Background: Working on Angular front ends. Retrieving a document that is base64 encoded from a backend. atob is giving me an error, but everything works.

Suspicion: I think my atob filter is called twice. Hitting the promise while the variable is undefined/null and then after the promise fills the variable.

Filter Code :

angular.module('docFilters', []).filter('base64Decode', function() {
    return function(cipherText) {
        return atob(cipherText);
    };
});

Controller Code :

angular.module('doc')
    .controller('DocCtrl', ['$scope', 'DocService', function ($scope, DocService) {   
        $scope.doc = DocService.getCurrentDoc();    
    }]);

getCurrentDoc() is a REST request. It makes a GET request to an internal web service.

Html :

<span ng-bind-html="doc.content | base64Decode"></span>

This works 'fine' - without checking the console you would never know. The console shows:

"Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."

This is new for me, so I'm not sure if there is a better way.

Answer 1

atob(undefined); //throws an error

You need to modify you filter

angular.module('docFilters', []).filter('base64Decode', function() {
    return function(text) {
        return text && atob(text);
    };
});

Answer 2

Why not have the filter check whether there's a value?

angular.module('docFilters', []).filter('base64Decode', function() {
    return function(cipherText) {
        if (cipherText) {
            return atob(cipherText);
        }
    };
});