Service Portal Widget breaks when using a glide_list to gather a list of roles

[Jeffrey Siegel]

I have a very basic Widget i created for the service portal, to show an iframe from a site on my intranet.  I wanted it to be dynamic and to have some security on it, so in the instance options i have setup 3 options:
1) string - URL

2) string - Iframe Title

3) glide_list - Roles to view (pointing at sys_user_role table)

with just the URL and Iframe title populated it works fine.  as soon as i populate a role in the Roles to view, it breaks and stops running all code.  If I then remove the widget from the page, change the Roles to view to be a string, add it back to the page, and populate it with a comma separated list, it works perfectly fine.

anyone have this experience?  anyone know how to fix?

HTML Template:

<div ng-if="c.data.access" style="background-color: 34,52,60">
  <center>
<iframe src="{{url}}" name="iframe" class="myIframe" title="{{c.options.frame_title}}" frameBorder="0">
  </iframe>
  </center>
  <script type="text/javascript" language="javascript"> 
$('.myIframe').css('height', $(window).height()*.98+'px');
</script>
</div>
<div ng-if="!c.data.access">
  <h1>
    Sorry, you do not have permission to view this data.
  </h1>
</div>

Client Script:

api.controller=function($scope,$sce) {
  /* widget controller */
  var c = this;
	$scope.url = $sce.trustAsResourceUrl(c.options.url);
};

Server Script:

(function() {
	data.title = options.frame_title;
	data.access = false;
	var roles = options.view_roles.toString();
	if(roles == '' || roles == null || roles == undefined){
		data.access = true;
	}
	else{
		if(roles.indexOf(",") > 0){
			var roleArr = roles.split(',');
			for(var i = 0; i < roleArr.length ; i++){
				var role = trim(roleArr[i]);
				if(gs.hasRole(role)){
					data.access = true;
				}
			}
		}
		else{
			if(gs.hasRole(roles)){
				data.access = true;
			}
		}
	}
})();