Problems with AngularJS

I'm fairly new to AngularJS and am having the current problem.

I have the following in my controller

//Define the programs list table columns
    $scope.programListColumns = "[{ Name: 'Name'},{ Status: 'Status'},{ CreatedByUserName: 'Created By'},{ ModifiedDate: 'Modified'},{ ModifiedByUserName: 'Modified By'}]";

I would like to use this as a columnmap for my element in the html, like so...

<table-helper datasource="programsList" columnmap="{{programListColumns}}"></table-helper>

My directive is quite extensive, but I basically build a table from my datasource and map the data I want from it using my columnmap, creating headers and rows for each item if that makes sense.

Here is my directive abbreviated a bit...

(function(){
var app = angular.module("MdfAngularApp");
var tableHelper = function() {
    //Initiate variables for directive
    //var template = '<div class="tableHelper"></div>',
    var link = function(scope, element, attrs) {
            var headerCols = [],
                tableStart = '<table>',
                tableEnd = '</table>',
                table = '',
                visibleProps = [],
                sortCol = null,
                sortDir = 1;

            //Watch the datasource for changes.
            scope.$watchCollection('datasource', render);

            ... Functions go here ...
return {
        restrict: 'E',
        replace: true,
        scope: {
            columnmap: '@',
            datasource: '='
        },
        link: link,
    } 
};

app.directive('tableHelper', tableHelper);
}());

Doing the above I get an empty string as my columnmap.

Now if I put my html like this

<table-helper datasource="programsList" columnmap="[{ Name: 'Name'},{ Status: 'Status'},{ CreatedByUserName: 'Created By'},{ ModifiedDate: 'Modified'},{ ModifiedByUserName: 'Modified By'}]"></table-helper>

and change my isolate scope columnmap property to "=", all is fine. I'm just trying to be a bit more encapsulated than this.

Any help would be greatly appreciated.